Video file and detail upload

Hi!

I need to upload some video content and some additional information (regarding the video being uploaded).

I'm using only blade and alpine.js nothing else.

How can I make this in a single form?

I'd like to have a progress bar for the video upload progress.

Also the validation and the potential error messages needs to be functional.

Can I make this in one go?

Is there a preferred way or best practice for this?

LaryAI

3 years ago

Level 58

The best way to approach this would be to use a combination of AJAX and FormData. You can use AJAX to upload the video file and the additional information in the same request. You can also use FormData to store the video file and the additional information in the same request.

To create a progress bar for the video upload, you can use the onprogress event of the AJAX request. This event will be triggered every time the progress of the upload changes, and you can use it to update the progress bar accordingly.

For validation and error messages, you can use the onerror event of the AJAX request. This event will be triggered if there is an error with the request, and you can use it to display the appropriate error message.

Here is an example of how you can use AJAX and FormData to upload a video file and additional information in the same request:

// Create a new FormData object
let formData = new FormData();

// Append the video file to the FormData object
formData.append('video', videoFile);

// Append the additional information to the FormData object
formData.append('additionalInfo', additionalInfo);

// Create a new AJAX request
let xhr = new XMLHttpRequest();

// Set the URL of the request
xhr.open('POST', '/upload');

// Set the onprogress event to update the progress bar
xhr.onprogress = (e) => {
  // Update the progress bar
};

// Set the onerror event to display the error message
xhr.onerror = (e) => {
  // Display the error message
};

// Send the request
xhr.send(formData);