Traditional Form-Based File Upload

The most basic approach to file uploads uses standard HTML forms:

<form action="/upload-handler" method="post" enctype="multipart/form-data">
    <input type="file" name="fileUpload" />
    <button type="submit">Upload</button>
</form>

Key requiremnets:

• POST method
• enctype="multipart/form-data"
• Input elements must have name attributes

Server-side handling (C# example):

public ActionResult ProcessUpload()
{
    if (Request.Files.Count > 0)
    {
        var uploadedFile = Request.Files[0];
        uploadedFile.SaveAs(Server.MapPath("~/Storage/") + uploadedFile.FileName);
        return Content("Upload successful");
    }
    return Content("No file received");
}

Asynchronous Upload with jQuery Form Plugin

For asynchronous uploads without page refresh:

// Initialize form
$('#asyncForm').ajaxForm({
    success: function(response) {
        console.log(response);
    }
});

// Manual submission
$(".manualSubmit").click(function() {
    $('#asyncForm').ajaxSubmit({
        success: function(response) {
            console.log(response);
        }
    });
});

FormData API for Modern Browsers

Using HTML5 FormData for direct file submission:

document.querySelector(".uploadButton").addEventListener("click", function() {
    const fileContainer = new FormData();
    fileContainer.append("fileData", document.querySelector("#fileInput").files[0]);
    
    fetch("/upload-endpoint", {
        method: "POST",
        body: fileContainer
    })
    .then(response => response.text())
    .then(result => console.log(result));
});

Chunked File Uploads

For handling large files:

function uploadInParts(file, chunkIndex) {
    const CHUNK_SIZE = 1000000;
    const endPosition = Math.min((chunkIndex + 1) * CHUNK_SIZE, file.size);
    const fileSegment = file.slice(chunkIndex * CHUNK_SIZE, endPosition);
    
    const payload = new FormData();
    payload.append("fileSegment", fileSegment);
    payload.append("originalName", file.name);
    
    fetch("/chunk-upload", {
        method: "POST",
        body: payload
    })
    .then(response => {
        if (file.size <= endPosition) {
            console.log("Upload complete");
            return;
        }
        uploadInParts(file, chunkIndex + 1);
    });
}

// Initiate upload
const selectedFile = document.querySelector("#multiFile").files[0];
uploadInParts(selectedFile, 0);

HTML5 Drag and Drop/Paste Upload

Drag and drop implementation:

document.querySelector(".dropZone").addEventListener("drop", function(event) {
    event.preventDefault();
    const droppedFiles = event.dataTransfer.files;
    
    const uploadPayload = new FormData();
    uploadPayload.append("uploadedFiles", droppedFiles[0]);
    
    fetch("/drop-upload", {
        method: "POST",
        body: uploadPayload
    });
});

Paste upload implementation:

document.querySelector(".pasteArea").addEventListener("paste", function(event) {
    event.preventDefault();
    const clipboardItem = event.clipboardData.items[0];
    
    if (clipboardItem.kind === 'file') {
        const pastedFile = clipboardItem.getAsFile();
        
        const uploadPayload = new FormData();
        uploadPayload.append("pastedImage", pastedFile);
        
        fetch("/paste-upload", {
            method: "POST",
            body: uploadPayload
        });
    }
});

WebUploader Plugin Implementation

Basic configuration:

const uploadHandler = WebUploader.create({
    server: '/upload-endpoint',
    pick: '#fileSelector'
});

document.querySelector("#startUpload").addEventListener("click", function() {
    uploadHandler.upload();
});

uploadHandler.on('uploadSuccess', function(file) {
    console.log("File uploaded successfully");
});

Chunked upload configuration:

const chunkedUploader = WebUploader.create({
    server: '/chunked-upload',
    chunked: true,
    chunkSize: 1000000,
    pick: '#chunkFileSelector'
});