Published on January 26, 2024By DeveloperBreeze

// 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 });
});

Comments

Please log in to leave a comment.

Continue Reading:

POST Request with Fetch API and JSON Data

Published on January 26, 2024

javascript

File Upload

Published on January 26, 2024

php

Various cURL Examples for API Interactions

Published on January 26, 2024

bash

Asynchronous Data Fetching in JavaScript using 'fetch'

Published on January 26, 2024

javascript

Upload and Store File in Laravel

Published on January 26, 2024

php

Asynchronous Fetch in JavaScript using async/await

Published on January 26, 2024

javascript

Fetch JSON Data from API in JavaScript

Published on January 26, 2024

javascript

File Upload with Type Validation in PHP

Published on January 26, 2024

php

Drag and drop Input

Published on January 26, 2024

JavaScript Code Snippet: Fetch and Display Data from an API

Published on August 04, 2024

javascriptjson