html input file - how to save selected file when selecting new file? - javascript

I'm trying to create an upload panel like facebook, but I've got a trouble with <input type="file" />.
Here is facebook upload image panel:
My trouble is: if I click add more (like image above), that means the <input type="file" /> will be clicked again. So, the value will be overridden.
After that, if I click submit button, only 1 image can be uploaded.
My jquery code to upload looks like this:
function Upload(evt, id)
{
var file = document.getElementById("file");
var formData = new FormData();
for (i = 0; i < file.files.length; i++) {
formData.append(file.files[i].name, file.files[i]);
}
formData.append("id", id);
$.ajax({
url: "/Home/Upload",
type: "POST",
dataType: "json",
data: formData,
contentType: false,
processData: false,
success: function (data) {
alert('upload successful...');
},
error: function () {
alert('upload failed...');
}
});
}
The first line: var file = document.getElementById("file");. It means: get the latest value of <input type="file" name="file" id="file" /> (no keep the selected file before).
Can you tell me how to get all the selected files? (I don't talk about multiple).
Thank you!

"My trouble is: if I click add more (like image above), that means the will be clicked again. So, the value will be overridden."
Here's the underlying problem with your script:
"You can't set the value of a file picker from a script" so no direct manipulation of form will work
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#File_inputs
You can't manipulate file inputs from javascript in any meaningful way (for obvious security reasons), you can only read them. However, you can manipulate the DOM. What facebook and other multi-part pickers actually do is create and destroy file input elements in order to allow the flows they want, rather than try to bind anything to the file value of the input.
There are a lot of plugins that handle this complexity for you, but it's pretty doable to get it working once you understand the problem you're working around.
further clarification:
yup, it sounds like you're thinking about it right now! just think of file inputs as read-only, and use another variable to store all your values, and any function to deal with showing previews in the dom reads from that rather than binding directly from the file input.
One extra thing I would add in response to But the value can only append, not remove :((, is that you shouldn't store the values in FormData if you might need to remove values. Instead just use a regular object to store all the values you want to add/modify, and then construct the object when the user submits the form. Something along the lines of this:
var myFormDataObject = {}; // can store inputs in this
// watch onchange and add/remove from myFormDataObject
function sendStuff(){
var formData = new FormData();
for (var key in myFormDataObject) {
formData.append(key, myFormDataObject[key]);
}
// then post/put/patch/etc the form
}

Related

sending array of edited array of files(images) to php script

I have a form containing an input of type file that can accept multiple files(images) as shown below:
<input type="file" id="fileupload" name="fileupload[]" multiple />
Once a user selects an image or multiple images they are added dynamically to the website and also the user can remove one or all of them if he wants to.
Is there a way I can update which files are chosen from the input element to send to php script?
If not how can I send only images the user chooses? I mean I can put what the user chose in another array in JavaScript but how can I send them to php script?
Edited
In more details for example when the user chooses three image files there is JavaScript code i use that appends them into screen as images and the user is given the option to remove one or all of them by clicking on them. So my problem is if the user for example removed one of the images how can I send only the other two images into the php script?
I am not looking for complete code. I am just looking for a hint on how to accomplish it.
I've understood what you want.
Combine Ajax with formData to get that.
$(document).ready(function(){
$("form#data").submit(function(){
// create your filtred list of files from your file input
var data = {};
$.each($('#fileupload')[0].files, function(i, file) {
// Keep only the files that the user has selected
if ( i % 2 == 0){ // <--- CHANGE THIS
data['file-'+i] = file;
}
});
// create a FormData (to send files with AJAX)
var formData = new FormData();
for (var key in data) {
formData.append(key, data[key]);
}
// send that formData
php_script_url = "your_script.php"
$.ajax({
url: php_script_url,
type: 'POST',
data: formData,
async: false,
success: function (data) {
console.log(data);
},
cache: false,
contentType: false,
processData: false
});
return false;
});
});
Don't forget to include jQuery before this script
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

How to clear text area?

I have a problem of clearing out of the text area in my application. The app has two methods of getting a specific data format: searching online database and using a javascript library.
First method: a user types a chemical name in a text field and presses "Search" button. If requested compound is in the database, a proper format is displayed in the text area.
Second method: if the name was not found in the database, then a user can use a JS library to generate a proper format which is displayed in the same text area.
If a user uses database first, the text area contains generated data from the database which can be replaced by data generated by JS library if a user decides to use it. The problem is that if the text area already has data generated by JS library it cannot be replaced by data from the database when first method is used. I don't know how to clear the text area containing data (generated by JS library) before inserting data from the database. Sorry if it still sounds confusing.
Here is a javascript code:
<script>
var sketcher = new ChemDoodle.SketcherCanvas('sketcher', 400, 300, {useServices:true});
var mol = sketcher.getMolecule();
var molFile = ChemDoodle.writeMOL(mol);
function myFunc($data)
{
document.getElementById('txt_area').value = $data
return false
}
</script>
<span onclick="myFunc(ChemDoodle.writeMOL(sketcher.getMolecule()));"
<button href='javascript:void(0)'; type="submit" id="get_mol">Get Mol</button>
</span>
Jquery/ajax:
$('#search').on('click', function()
{
chemical = $('#chemical').val();
$.ajax({
type: "GET",
url: "/_get_smiles",
data : { 'chemical': chemical},
success: function(data)
{
$('#txt_area').text(data.smiles);
},
error: function(error)
{
console.log(error)
}
});
});
HTML:
<input type="text" id="chemical" size="40">
<button type="submit" id="search" value="Search">Search</button>
<textarea id="txt_area" name="smiles_mol" rows="28" cols="49"></textarea>
To clear text area I the methods below but unsuscessfully:
$('#txt_area').text = "";
$('#txt_area').html = "";
$("#txt_area").attr("value", "");
Method $('#txt_area').val(""); clears the text area but prevents inserting data from database. Any comments and suggestions are highly appreciated!
I think you simply need to change the jQuery/AJAX portion to use this:
$('#txt_area').val(data.smiles);
However it's a bit confusing as to how the parts relate to one another since you seem to have two different pieces of JavaScript and two pieces of HTML but haven't written them together. Is that how the file is structured? If one is supposed to be a fallback to the other, it feels like it should be done automatically.
Edit - like this, if I'm understanding correctly:
$('#search').on('click', function() {
chemical = $('#chemical').val();
$.ajax({
type: "GET",
url: "/_get_smiles",
data: {
'chemical': chemical
},
success: function(data) {
if (data.smiles) {
$('#txt_area').val(data.smiles);
} else {
$('#txt_area').val(ChemDoodle.writeMOL(sketcher.getMolecule()));
}
},
error: function(error) {
console.log(error);
$('#txt_area').val(ChemDoodle.writeMOL(sketcher.getMolecule()));
}
});
});
How about $('#txt_area').val(null);?
That's how you clear a textbox but maybe it's something else that's preventing the library from doing its stuff.
If you're certain that there's some weirdness going on with clearing the data, you could try the following in your AJAX callback
$newTextArea = $('<textarea>').attr({ id:'txt_area', name:'smiles_mol', rows:'28', cols:'49'}).text(data.smiles)
$('#txt_area').replaceWith($newTextArea);
This replaces the old text area with a totally new text-area DOM element

Change value of dynamic inputs

I have a modal window that has a lot of new dynamic elements (inputs, buttons, etc.). I want to see if a certain element(or in this case, and input) gets created and if it does, then change its value.
The scenario is that if I make an ajax request for populating data, and as the user browses the modal window I can reuse some of that data. When the input field I'm looking for gets created, I can just put the value of the ajax call I made previously.
I have tried: $("#myinput_id").val(sellerData['id']);
obviously the above wont work because the element doesn't exists, yet. I'm also trying to avoid new ajax calls for the same data :/
Any thoughts?
$( "#add").bind('click', function() {
$.ajax({
url: '/seller/get',
type: 'POST',
success: function(response) {
sellerData = jQuery.parseJSON(response);
//other code here
//this doesn't work
$("#myinput_id").val(sellerData['id']);
}
});
});
Then the above gets triggers. The input field doesn't exist yet. How can I make it "look for it" if in the future the input field gets created?
Try using .length http://api.jquery.com/length/
if($("#myinput_id").length) //There is at least one element selected
//Do something
a bit confusing question you are saying u want to populate the data and your are using POST

Show ajax tooltip from an SVG onclick event

I have an SVG with this code for some shapes (its a map)
onclick="top.traeDatos(evt.target.id);"
in the html file I have:
function traeDatos(region){
alert(region);
}
So, I click on a region, I have the alert window with the region name and the variable in the html file. Thats great
Now I want that the click on the map shows a popup with more information i'll get using ajax from multiple databases trough a file called, for example "getDetails.php".
Im new in js and ajax, I know how to make a standard call in ajax to get some information given an id (or name in this case), I know how to change the value of a text field to the text I get trought the ajax call...but I dont understand how to call ajax and show a tooltip from that javascript code in the SVG or the one in html.
Im not sure too of what tolltip to use, but one problem at the time ;)
Can you enlighten me a little.
Thanks!
Here's a start:
function traeDatos(region){
var domn = document.domain;
document.domain = domn;
var detURL = "http://" + domn + "/getDetails.php";
$.ajax({
url: detURL,
type: 'POST',
data: {
region: region
},
cache: false,
success: function(json){
var data = jQuery.parseJSON(json);
//using PHP's json_encode() you can return an array
//in the example below 'info' is an item in the array
$('#insert_place').val(data.info);
}
});
}
Let me know if you have some problem with that.

submit multiple forms to same page

I have three forms on a page. They each have multiple inputs including files. I would like so that when I submit the last form, the inputs for all three forms are sent to the POST data for the action location. I can jQuery if necessary.
Here's how you could combine multiple forms into one. Now, a warning: if you have more than one form with file-type inputs, you've got a problem that's really hard to solve. The browser will not let you use XMLHttpRequest (ie Ajax, in any form) to post a multi-part form POST with file inputs. You also won't be able to create a new form with the file inputs in it, because you can't set the value of file input elements with Javascript. Thus, the only way this can work is if you have multiple (3? whatever) forms, and only ONE Of them has file inputs. If that's the case, then what you can do is pull all the (non-file) inputs from the other 2 forms into the other form, and then submit that one.
function whenFormsCollide() {
// pass in one or more form elements
var forms = $.makeArray(arguments);
var hasFiles = 0, targetForm = null;
$.each(forms, function(i, f) {
if ($(f).find('input:file').length > 0) {
++hasFiles;
targetForm = f;
}
});
if (hasFiles > 1) throw "More than one form has 'file' inputs";
targetForm = targetForm || forms[0];
$.each(forms, function(i, f) {
if (f === targetForm) continue;
$(f).find('input, select, textarea')
.appendTo($(targetForm));
});
$(targetForm).submit();
}
I haven't tested that, but I've done stuff like it many times and I know that building up a <form> element works fine, even in IE6. (IE has some weird issues with form fields sometimes, but I think this part should be OK. At worst, instead of just being able to "move" the fields with that "appendTo" call you'd have to copy out the names and values and make new form fields.)
You may want to try using serialize() and append the string to your action URL.
You could submit them to hidden Iframes, that way you maintain control of the host page.
You can write one JS function that submits all three forms.
Your only option right now is a jQuery AJAX request (or a XMLHTTP one, but that's not recommended).
Try rethinking your design, I mean, why do you need 3 forms on one page... that's too `formy' for me already.
There is something else you can probably do: put the jQuery UI dialog box container div inside one form (this should work, I guess) and just have the fields within it...
I used below code to submit two forms' data in my website.
The idea is that you get the multiple forms data using serialize and combine that data and equalize that to data parameter of the $.ajax function.
.
// submits two forms simultaneously
function submit_forms(form1_id, form2_id)
{
var frm1_name = $("#" + form1_id).attr('name');
var frm2_name = $("#" + form2_id).attr('name');
if (frm1_name == frm2_name)
{
alert('The two forms can not have the same name !!');
}
else
{
var frm1_data = $("#" + form1_id).serialize();
var frm2_data = $("#" + form2_id).serialize();
if (frm1_data && frm2_data)
{
$("#div_busy").html('<strong>Processing...</strong><br /><img id="busy" src="./images/progress_bar.gif" border="0" style="display:none;" />');
$("#busy").fadeIn('slow');
$.ajax(
{
type: "POST",
url: "process_sticker_request.php",
data: frm1_data + "&" + frm2_data,
cache: false,
error: function()
{
$("#busy").hide('slow');
$("#div_busy").css({'color':'#ff0000', 'font-weight':'bold'});
$("#div_busy").html('Request Error!!');
},
success: function(response)
{
$("#div_busy").hide('slow');
$("#hdnFormsData").html(response);
// open popup now with retrieved data
window.open('', 'popup2', 'toolbars = 1, resizable=1, scrollbars=1, menubar=1');
document.getElementById("prt").action = 'win_sticker.php';
document.getElementById("prt").target = 'popup2';
document.getElementById("prt").submit();
// reset the action of the form
document.getElementById("prt").action = 'list_preview.php';
}
});
}
else
{
alert('Could not submit the forms !!');
}
}
}
Can you explain the sense of separating information in different forms and combine the information later with JS? And when Java Script is disabled your Formulas didn't work?
Put all together in one form. If you want to evaluate only the special data Fields of your Form, check on the server side which submit button was pressed.
When you have a problem an you need JS to fix a normal communication problem, then you have a conceptional problem. JS can help you to customize and give a better UI - but this problem is useless.

Categories

Resources