Drop Uploader – Drag&Drop Javascript File Uploader

Here is an example of a complete settings configuration for Drop Uploader - Drag&Drop Javascript File Uploader:

Basic Options

dropUploadConfig = {
  inputName: 'file', // The name of the file input
  buttonClass: 'drop-zone-button', // The CSS class of the upload button
  dragOverText: 'Drop files or click to upload', // The text to display while the user is dragging a file over the drop area
  dropText: 'Drop files or click to upload', // The text to display when the user drops a file in the drop area
  acceptedFiles: '.jpeg,.jpg,.png,.gif,.bmp', // A comma-separated list of allowed file extensions
  autoUpload: true, // Whether to automatically upload the file when it is selected
  uploadUrl: '/upload', // The URL to send the uploaded file to
  maxHeight: 500, // The maximum height of the upload area
  maxSize: 1024, // The maximum size in MB of the uploaded file
  minSize: 0.1 // The minimum size in MB of the uploaded file
};

Styles

dropUploadConfig.styles = {
  border: '1px solid #ccc', // The border style of the drop area
  borderColor: '#ccc', // The border color of the drop area
  borderWidth: '1px', // The border width of the drop area
  borderRadius: '5px', // The border radius of the drop area
  padding: '5px', // The padding of the drop area
  backgroundColor: '#eee', // The background color of the drop area
  color: '#666', // The text color of the drop area
  fontSize: '1.2em', // The font size of the drop area
  display: 'block', // The display style of the drop area
  textDecoration: 'none', // The text decoration of the drop area
  letterSpacing: '2px' // The letter spacing of the drop area
};

Animations

dropUploadConfig.animations = {
  opacity: 0.4, // The opacity value when the animation is activated
  transition: 0.5 // The duration of the animation transition
};

Drag and Drop

dropUploadConfig.drop = {
  enabled: true, // Whether the drop area is enabled or not
  hoverColor: '#aaa', // The color of the hover effect
  hoverTransition: 0.2 // The duration of the hover effect transition
};

Button Styles

dropUploadConfig.buttonStyles = {
  backgroundColor: '#f9f9f9', // The background color of the upload button
  color: '#000', // The text color of the upload button
  padding: '10px', // The padding of the upload button
  fontSize: '1.2em', // The font size of the upload button
  width: '100%', // The width of the upload button
  height: '40px', // The height of the upload button
  borderRadius: '5px', // The border radius of the upload button
  textDecoration: 'none', // The text decoration of the upload button
  transition: 0.3 // The duration of the button transition
};

Here are the features of the Drop Uploader - Drag&Drop Javascript File Uploader:

1. Easy to use: The plugin is easy to integrate into your form, requiring no customization of your existing form HTML code.
2. One & Multiple Files Uploading: The plugin allows for single and multiple file uploads.
3. File Type Validation: The plugin checks the file type and only allows uploads of allowed types.
4. File Browse and Drag&Drop Methods Supported: The plugin supports both file browse and drag-and-drop methods.
5. Works with native input file field: The plugin works with the native input file field.
6. PHP File Uploading Script included: The plugin includes a PHP file uploading script.
7. Errors handling: The plugin has error handling capabilities.

Additionally, the plugin has the following optional features:

1. Thumbnails Layout: The plugin allows for a thumbnails layout for displaying uploaded files.
2. List Layout: The plugin allows for a list layout for displaying uploaded files.
3. Preloaded Files: The plugin allows for preloading files.
4. Show Percentage for Progress Bar: The plugin allows for showing the percentage for the progress bar.
5. Chunked Upload Method: The plugin allows for chunked uploads.
6. Set Progress Bar Color: The plugin allows for setting the progress bar color.
7. Triggers for AJAX File Upload Start and End Events: The plugin allows for triggering events when an AJAX file upload starts and ends.
8. Limit of Uploaded Files: The plugin allows for setting a limit on the number of uploaded files.
9. Progress Bars for AJAX Upload: The plugin allows for displaying progress bars for AJAX uploads.
10. AJAX Upload Method: The plugin allows for using the AJAX upload method.
11. Thumbnails Preview Option: The plugin allows for previewing thumbnails.
12. Max Upload File Size Limit: The plugin allows for setting a maximum upload file size limit.
13. Firefox Support: The plugin supports Firefox.
14. Localization Options: The plugin allows for localization options.

Please note that some of these features may require additional setup or configuration.