Minimal File Upload Library with Drag & Drop – Upload Zone

Upload Zone is a super tiny JavaScript library that adds convenient file upload capabilities to web applications. It processes drag and drop interactions, handles file input events, tracks upload progress, manages success and error states, validates files, and gives visual feedback during drag operations.

The library works without external dependencies and integrates into existing projects through a simple JS call. You can customize file upload behavior through options like size limits, accepted file types, custom styling, and more.

How to use it:

1. Download and include the upload-zone.min.js file on your webpage.

<script src="/path/to/upload-zone.min.js"></script>

2. Create an empty DIV container that will serve as the drag-and-drop area.

<div class="upload-zone"></div>

3. Initialize the Upload Zone library by creating a new UploadZone instance and passing an object with your desired settings.

const uploadZone = new UploadZone({
  // options here
});

4. All possible options.

• containerSelector: Specifies the CSS selector for the upload container.
• inputSelector: Defines the CSS selector for an existing file input element. If not provided, the library creates one.
• uploadUrl: Sets the URL where the files will be uploaded. The default is the current page’s URL.
• allowMultiple: A boolean value indicating whether to allow multiple file uploads.
• acceptedFiles: Defines the MIME types of files that are allowed.
• maxFileSize: Sets the maximum allowed file size in bytes. The default is null (no limit).
• customStyles: An object to apply custom CSS styles to the upload container.

const uploadZone = new UploadZone({
  containerSelector: '.upload-zone',
  inputSelector: '#fileToUpload',
  uploadUrl: window.location.href,
  allowMultiple: true,
  acceptedFiles: '*',
  maxFileSize: null, 
  customStyles: {}
});

5. Upload Zone provides callback functions to handle different stages of the upload process. You can define these functions in the options object during initialization.

• onUploadStart: Called when an upload begins. It receives the File object as an argument.
• onUploadSuccess: Invoked when an upload is successful. It receives the server’s response data.
• onUploadError: Called when an upload encounters an error. It receives an error object.
• onUploadComplete: Executed after an upload completes, regardless of success or failure.

const uploadZone = new UploadZone({
  onUploadStart || (() => { }),
  onUploadProgress || (() => { }),
  onUploadSuccess || (() => { }),
  onUploadError || (() => { }),
  onUploadComplete || (() => { }),
});

6. You have flexibility in styling the upload area. You can either modify the default styles provided by the library or add your own CSS rules to override them.

.upload-zone {
  border: 2px dashed #e5e7eb;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  transition: all 0.2s ease;
  cursor: pointer;
  background-color: #ffffff;
  ${Object.entries(this.options.customStyles)
  .map(([key, value]) => `${key}: ${value};`)
  .join('\n')}
}
.upload-zone:hover {
  border-color: #3b82f6;
  background-color: #f8fafc;
}
.upload-zone.drag-over {
  border-color: #3b82f6;
  background-color: #f8fafc;
}
.upload-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
}
.upload-progress.hidden {
  display: none;
}
.spinner {
  animation: spin 1s linear infinite;
  border: 2px solid #e2e8f0;
  border-top: 2px solid #3b82f6;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  margin-right: 0.75rem;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}