Develop Reference

Storing file chooser data in a hidden input

I am using a tool called TamperMonkey to modify a webpage for my personal convenience. TamperMonkey lets you modify the client-side HTML etc. by appending JavaScript to the page after it loads.
The webpage has a file chooser, but it doesn't let you drag-and-drop a file. I use this webpage a lot so having drag-and-drop functionality would really help.
This page has a form with a file input type. I've been reading, and there's no way to modify a file input type for security reasons. But, using TamperMonkey, I could change the input type of the file chooser to "hidden," then set the hidden input value to the file contents that I drop on the webpage, right? It's my understanding that the server couldn't tell the difference (if the name attribute is the same).
I don't know how to set the hidden input type to the same data the file chooser would have:
I've got my file here: const file = e.originalEvent.dataTransfer.files[0];
I've got my hidden input type by doing this: const hiddenField = $("iframe").contents().find(".file-input").attr('type','hidden')
I just don't know how to take file and set it on hiddenField. Should this value be base64 encoded? A blob? Regardless, what code would set the data correctly?
The form it's wrapped in looks like this:
<form ... method="post" enctype="multipart/form-data">
Important context for alternative suggestions: this file chooser input isn't on the page at all until you click a button. Then it shows up in an iframe.
I am using firefox.

It is possible to modify a file input type with Tampermonkey.
If you are not able to add drag and drop support to the input itself straight away, you can implement drag and drop using another dom element and use them as below.
const dT = new ClipboardEvent('').clipboardData || // Firefox < 62 workaround exploiting https://bugzilla.mozilla.org/show_bug.cgi?id=1422655
new DataTransfer(); // specs compliant (as of March 2018 only Chrome)
dT.items.add(new File([dataURItoBlob(image)], '1.jpg', { type: 'image/jpeg' }));
dT.items.add(new File([dataURItoBlob(image2)], '2.jpg', { type: 'image/jpeg' }));
// then ...
// $("iframe").contents().find(".file-input").get(0).files = dT.files;
That snippet of code was tested working, in a similar setting where a file input was being attached to the page dynamically after clicking a button. The images were drag n dropped onto the page using a different div.

Javascript call other function

I have some problems with Javascript and calling 'function in function'.
I have this code:
Sorry about pastebin.com/tKVNmGLJ , again problems with pasting a code.
And i need to call first function in second one, but only cut of that code:
$('#delete-confirmation-modal-document').on('show.bs.modal', function(e) {
var invoker = $(e.relatedTarget);
$('button.confirm', this).off('click').on('click', function(){
$.get(invoker.data('href'), function(resp){
invoker.parents('.thumbnail').parent('div').remove();
$('#delete-confirmation-modal-document').modal('hide');
});
});
});
cause there is no button to confirm.
Edit:
Sorry for less information!
I have drop box, for uploading a file. When you upload file you see the file in that drop box and down bellow drop box, but when you refresh page you don't have this file in that drop box (what is correct). But problem is, if you upload file and you have uploaded mistaken file you have button 'Remove' (talking about drop box), so you remove the file and it's gone from box, but it's not removed down bellow drop box (it is removed but I have to refresh page to see that changes).
So the first function is removing that file from down bellow drop box, let's call it 'other box' for example, if it's already uploaded and when you click 'Remove' from that other box, you have modal to confirm that changes to remove file, and it's removed correctly. Second remove function is removing file only from drop box, but I need to remove it from other box too. So i need somehow to call that function and to remove that added file. I tried to paste that cut of code in second code but it's not working, I know why but not sure how to write that.

$('button.confirm') probably should be $('button#confirm')
... with the HTML, this is just a guess - because it's not reproducible.

When files[] is opened more than once, previous uploads are erased

I am creating and using a custom image uploader within my form which is submitted via ajax - everything works perfect.
I am allowing users to upload multiple images e.g:
<input type="file" name="files[]" accept="image/*" class="files-data" id="upload_images" multiple="">
The problem that I am facing, is that when a user clicks the "Image Upload Button" multiple times, each time the input (the array of previously uploaded images) is reset.
So if a user uploads 3 images, great - that works fine. But if they decide to open the file upload again and upload another image or two, the original 3 files are gone.
I am not looking for a plugin to do this, and I know that this can be done from other image uploaders I have seen.
Do you know how I can maintain previously uploaded images when the multiple input field is opened more than once?
Thank-you for any help.

This is the default behavior of HTML. You need to manage those uploaded files via javascript/jQuery in order to maintain the user selection and for which the plugins you are trying to escape from will do that for you :)

I solved this by looping through the uploaded images and storing them into an array each time a new file is uploaded. My problem was that I was doing something completely different, and just overriding the files each time the user uploads more files.
Some common sense, and sitting here to think for a while helped me solve this one :)
MyForm = {}; // empty array
MyForm.userUploads = []; // empty object
$('.add-listing-photos input[type="file"]').on('change', function() {
// Get the files.
var files = $(this)[0].files;
// For each file, append it onto the end of our array.
for( var key in files ) {
if( typeof( files[key] ) === 'object' ) {
MyForm.userUploads.push( files[key] );
}
}
console.log(MyForm.userUploads);
});
And then sent this through my ajax request.

how can I send input straight to textarea

I am using
https://github.com/Rovak/InlineAttachment
I currently have it all setup so I can drag and drop images to my textarea and they upload straight to imgur, from following this tutorial:
http://wilfreddenton.com/posts/drag-and-drop-photo-uploads-to-imgur
what I'm trying to do is add an input so if the user doesnt want to drag and drop, they can simply browse their pc and upload files, and have them go straight into the textarea upon selection. (just how github comments work)
I just cant seem to get the input to insert into the textarea.
Here's a live example: http://codepen.io/DrCustUmz/pen/KzZOeP
or if your logged into github you can see the end goal what im trying to do: https://github.com/wilfreddenton/dynamic-scss/issues/new
dont actually submit but click "selecting them" below the textarea, pic a few images, and watch the textarea after you click open.
the input selection is not working in this example. How can I get it so I open the choose files, select a few images, then when I select "open" on the browse my pc popup, they are directly inserted into the textarea, just like i drag and dropped them.

Most of the writting work is done in background so I had to rewrite the writting to textarea. Sorry I mostly use pure javascript so I didn't use any fancy jquery features.
This is where the magic happens. The upload can handle only one file at a time so I had to use loop for all of them. I recommend you take a look at the whole code.
document.getElementById("inputFile").addEventListener("change", function() {
var object = this;
var editor = document.getElementById("editor");
for(var i=0;i<this.files.length;i++) {
editor.value += "uploading...";
uploadHandler.customUploadHandler(this.files[i], function(result) {
editor.value = editor.value.replace("uploading...",result.filename);
});
}
});
Whole code on CodePen

You can simply attach the eventListener upon file is selected via choose files option. You just have to trigger the upload in callback. Assume that you've given id of the input type file as "fileUpload"
document.getElementById('fileUpload').addEventListener('change', function () {
console.log(this.files);
/*trigger the upload here, like you're doing in drag and drop*/
});

How to make link test if desired page exists, then go to it if it does?

Alright so I am not the most astute javascript/jQuery user, but here it goes.
I want to make a series of html pages that will each link to the next/prev page and will loop once they reach the end of those pages ('page1' and 'lastpage.html'). I know I could do that with just html, but I don't want to have to continually go and revise each page, as I plan on adding pages to that bank/series of pages, so the amount of pages cycling will increase.
The one solution I have thought up of is to test if the 'next' link will exist like this
$(document).ready(function(e) {
$('#next').click(function(){
.preventDefault();
.ajax({
type: 'HEAD',
url: 'art_2.html',
success: function() {
window.location.href = "art_2.html";
},
error: function() {
window.location.href = "art_1.html";
}
});
});
});
So basically how do I make this work, or am I trying to use a tool where I could be using a power-tool?
also added in a prevent default just remembered...
and guess what? Cannot use PHP :/ so yeah...
ALSO I'm kinda lack necessary intelligence to do a good deal of the things with the coding. Entirely self taught...

This is a broken "fix" at most. You should have a server-side script that updates the list regardless of which page you are viewing.
An example of decent implementation would be a mySQL database with a table that contains each page id (auto increment), page url, and optionally a page name. Then dynamically create the "next" and "previous" page based on the results returned form the sql queries.

Keep all pages you want in the cycle/loop in a folder in project
Write a class that reads directory structure
Manipulate file names as you want to link name and store these into a data structure
In UI, based on current page name, get the next one.
I hope this helps.
You could store the data structure in session to access via UI.