How can I store list of image and video files in JavaScript?

Question

I want to store list of images and video files store in list in java script. I used formData.append() method, to store files with key. It is stored properly.

But in between I am not able to delete the file using key from formData.

So I need another solution for this problem.

Code:

var file = $("#pictureUrl")[0].files[0];
formdata.append(index + "p", file); 
var vfile = $("#videofile")[0].files[0];
formdata.append(index + "v", vfile);

Delete Code :

var key=id+"v";
formdata.delete(key);

[`.pop`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop), [`.shift`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift) [`.slice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice), [`.splice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) — Adelin, Jul 18 '18 at 07:06
Hehe, not only is it good point, but I think we mistook the `formData` as an array, when it seems it's a `FormData`, which suggests OP has a compatibility issue — Adelin, Jul 18 '18 at 07:12
@Adelin yes you are corect . Formdata is not an array. Every one refer this link https://developer.mozilla.org/en-US/docs/Web/API/FormData/delete — Balu, Jul 18 '18 at 07:34

score 0 · Answer 1 · answered Jul 18 '18 at 07:52

Use Arrays As Containers:

    var imgDiv = document.querySelector('.imagesDiv');
    var vidDiv = document.querySelector('.videosDiv');
    var images = ['image_path/1.jpg','image_path/2.jpg','image_path/3.jpg','image_path/4.jpg'];
    var videos = ['video_path/1.mp4','video_path/2.mp4','video_path/3.mp4','video_path/4.mp4'];
    // Append Images to a div with class="imagesDiv"
    var addedImg = '';
function addImages() {
    for (i=0; i<images.length; i++) {
       addedImg+= '<img src="+images[i]+" alt="Alternative Text" >';
    }
    imgDiv.insertAdjacentHTML('beforeend', addedimg);
}

    // Append videos to a div with class="videosDiv"
    var addedVid = '';
function addVideos() {  
    for (j=0; j<videos.length; j++) {
       addedVid+= '<video width="320" height="240" controls><source src="+videos[j]+" 
                  type="video/mp4"></video>';
    }
    addedVid.insertAdjacentHTML('beforeend', addedVid); 
}
addImages();
addVideos();

How can I store list of image and video files in JavaScript?

1 Answers1