Programming & Development
Programming & Software
JavaScript
I am hoping to get some assistance with making several updates to an existing file upload script.
To briefly summarize, the code is used on a video/image sharing forum to help streamline the process of uploading images and videos when making a new post.
A link to the file upload script can be found at the following link: https://stackblitz.com/edit/csforumupload?file=index.js
The script currently does the following:
- Adds a number of new elements on the page, including 2 separate areas to upload photos and videos
- Uploading can occur by either dragging and dropping, clicking the video/photo buttons and selecting file(s), or by pasting a file from the clipboard
Workflow for Images:
- If the file is an image, the script will upload the file to an image hosting service called imgBox
- Once the image upload is complete, the script will then add the image to the forum's input field, with the correct formatting tags around it (i.e., [IMG][/IMG])
Workflow for Videos:
- If the file is a video, the script will upload the file to two different video hosts simultaneously, goFile and Buzzheavier
- For videos, after the uploads are complete, the script will then grab a thumbnail of the video from goFile and re-upload it to imgBox (the goFile thumbnails are often deleted pretty quickly)
- The final output for videos is a table. Once all uploads are finished for a file, the script will check to see if a table has already been added to the forum input field (and add one if needed)
- Then the script will take the responses from all 3 uploads and add the output as a new row in the table.
The screenshot below shows what the script currently looks like when running on the forum. Note the drop zones for videos/images. The screenshot also shows an example of the table that is added after a video is uploaded.

_____________________________________
Given the above context, I am hoping you can help make the following modifications:
Integrate Bunkr Upload Code:
- The upload script currently uploads files to two different video hosts. I would like to add a third (Bunkr.cr).
- Importantly, the code is already written for Bunkr, and just needs to be integrated into the current version of the upload script. The code can be found at the following link: https://stackblitz.com/edit/bunkr-cr?file=index.js
- As part of this, I would also like to add a text box below the video upload drag and drop zone that allows the user to enter a folder name for Bunkr. If the field is filled out, any videos uploaded to Bunkr should all be added to that folder. If it is not filled out, then the files should not be added to a folder in Bunkr.
Note: as you can see in the video upload script I actually started to do this, but only made it as far as adding the text box to the page. Feel free to use as a starting point or start over depending on your preference - The output table that is created by the script includes a link to the file at each file host, similar to the screenshot above. Would need to add a third link ("Bunkr Download") below the first two.
Update Approach for Generating and Uploading Video Thumbnails
- During step 2 of the video workflow (above), the script grabs the video thumbnail from GoFile and re-uploads it to imgBox.
- This unfortunately is not super reliable, as GoFile often will change the server that the thumbnail is saved on immediately after upload
- As a result, I am hoping to modify step 2 so that the script grabs a screenshot of the video directly (i.e., using native javascript) instead. The remaining components of the script would remain the same (i.e., the generated thumbnail would then be uploaded it to imgBox, and ultimately added to the video table).
- If possible, I would actually like to have the script generate 12 different thumbnails, taken at even intervals throughout the video. These thumbnails would be added to a single parent canvas, and then the parent canvas would be uploaded as a single image to imgBox.
- I wrote a crude proof of concept at this link showing the thumbnail generation: https://stackblitz.com/edit/videothumbnails?file=index.js
Note: the canvas is visible in this script for reference, though would need to be hidden for production! - Let me know if this isn't possible for whatever reason and we can figure out an alternative approach.
Other Minor Updates:
- For the image upload section, add a text box that allows the user to enter a URL. Clicking the submit button next to the text box will check to see if the URL directs to an image, and if so, upload the image to imgBox and return the image link
- Below the video upload box, add check boxes to toggle on/off each of the 3 file hosts (all 3 on by default). Files won't be uploaded to any host set to 'off'
... Show more