Can I insert or edit a file input with val()?

Question

I'm making a CRUD for an admin panel with jQuery. I'm adding "videos" to a list using the following form:

So when I submit the form, all the fields are pushed to an array called videos and the form is cleared.

The problem begins when I try to edit a specific video and try to insert all the values of the current video inside the fields of the form. I'm doing this:

$('#video-title').val(video.videoTitle);
$('#video-segment').val(video.videoSegment);
$('#video-thumbnail').val(video.videoThumbnail);
$('#datepicker3').val(video.videoDate);
$('#video-description').val(video.videoDescription);
$('#bright-id').val(video.videoBrightCoveId);

Everything works good, but in the video thumbnail (the image uploaded for that specific video) give to me this error:

jquery.min.js:2 Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.
    at HTMLInputElement.<anonymous> (https://localhost:5001/lib/jquery/jquery.min.js:2:68568)
    at Function.each (https://localhost:5001/lib/jquery/jquery.min.js:2:2777)
    at k.fn.init.each (https://localhost:5001/lib/jquery/jquery.min.js:2:1419)
    at k.fn.init.val (https://localhost:5001/lib/jquery/jquery.min.js:2:68263)
    at HTMLButtonElement.<anonymous> (https://localhost:5001/admin/events/create:1239:35)
    at HTMLTableSectionElement.dispatch (https://localhost:5001/lib/jquery/jquery.min.js:2:42571)
    at HTMLTableSectionElement.v.handle (https://localhost:5001/lib/jquery/jquery.min.js:2:40572)

My question is: There is a way where I can edit the thumbnail field? Or is it not possible in the way that I'm doing this?.

score 2 · Accepted Answer · answered Apr 07 '20 at 03:02

You can use DataTransfer() to set value of input type file.

Eg:

var tst =   new DataTransfer(); 
tst.items.add(new File(['test'], video.videoThumbnail));
video_thumbnail.files = tst.files;

var tst =   new DataTransfer(); 
tst.items.add(new File(['test'], 'yourimage.jpg'));
video_thumbnail.files = tst.files;

 <input type="file"  id='video_thumbnail'>

Can I insert or edit a file input with val()?

1 Answers1