DeveloperBreeze

JavaScript File Upload using Fetch API and FormData

javascript
// Get the file input element
const fileInput = document.querySelector('#file-input');

// Add an event listener for the 'change' event on the file input
fileInput.addEventListener('change', (event) => {
    // Get the selected file
    const file = event.target.files[0];

    // Create a FormData object and append the file to it
    const formData = new FormData();
    formData.append('file', file);

    // Use the Fetch API to send a POST request with the file data
    fetch('/upload', { method: 'POST', body: formData });
});

Related Posts

More content you might like

Tutorial
javascript

JavaScript in Modern Web Development

  • JavaScript is used in IoT devices for controlling hardware and sensors.
  • Example: Node.js-based IoT applications.
  • Libraries like Three.js and Babylon.js enable building browser-based games.
  • Example: Interactive 3D experiences.

Dec 10, 2024
Read More
Tutorial
javascript

AJAX with JavaScript: A Practical Guide

AJAX allows form submissions to be processed in the background without reloading the page.

Fetch and display search results in real-time as users type in the search box.

Sep 18, 2024
Read More
Code
javascript

React Custom Hook for API Requests

No preview available for this content.

Aug 12, 2024
Read More
Code
javascript json

JavaScript Code Snippet: Fetch and Display Data from an API

No preview available for this content.

Aug 04, 2024
Read More

Discussion 0

Please sign in to join the discussion.

No comments yet. Be the first to share your thoughts!