Preloading input images

JavaScript
1

I am trying to preload a form with images aready added in a database,
Can the server images be added to the INPUT file as pre filled?

function buildInputCurrent(ref, loc, w, h, img){
var thisInt = parseInt(ref);
var nextInt = parseInt(ref + 1);
var nextDiv = $(“#ii” + (nextInt)).length;
var nextURL = “readURL(this, " + nextInt + “)”;
if(nextDiv == 0){
var adiv = $(‘

’).attr(“class”,“input-holder-image “+inputClasses[nextInt]).attr(“id”, “ii” + nextInt);
var aimg = $(‘’).attr(“class”,“imageuploaded”).attr(“id”,“image” + nextInt);
var ainput = $(‘’).attr(“type”,“file”).attr(“name”,“images”).attr(“onchange”,nextURL).attr(“class”,“uploader”).attr(“id”,“img” + nextInt);
adiv.append(aimg).append(ainput);
$(”#ihe1”).append(adiv);
}
var newW = 0; var newH = 0;
if(w > h){newW = 200;newH = Math.round(newW*(h/w));}
if(w < h){newH = 200;newW = Math.round(newH*(w/h));}
if(w == h){newH = 200;newW = 200;}
$(”#image" + thisInt).attr(“src”,loc).width(newW).height(newH);
$(“#ii” + thisInt).addClass(“input-holder-green”);
}

2

If you are asking if you can set a filename in the value of a type=‘file’ field, the answer is no. You can clear it, by setting it to an empty string, but you cannot set it to a filename through any programmable means, as that would allow someone to specify and upload any file off of a computer. The value can only be set to a filename through the browser’s file selection dialog.

If you want to list existing files, you would need to display them somewhere in the vicinity of the form field.

If you want to programmatically compare selected file(s) with a list of existing filenames, to display a message, you can do so.

3 Likes
3

Okay thanks,

I was hoping to add the image name so I could reference it on server side afterwards (file.filename) to check if it is the same as the database, and only add other images if they don’t exist already.

But I think i will run two scripts, first to check if the image can stay already up loaded if exists, and then run the second file script to upload any newer images in the form.

4

Filenames can be set to anything. Someone could upload the same file, a 1000 times, with a different name each time or upload a different file with the same name as an existing file.

Also, you wouldn’t pass server-side information through the browser and use it on the server, since anything that comes from the browser can be manipulated and cannot be trusted. You would perform any validation wholly on the server after the data has been submitted.

What exactly are you trying to accomplish?

5

Basically a user adds images to the website, when they are uploaded to the server I change the filename to a unique value and this name gets stored in the database.

When it comes to edit the images I load them into the form using the file on the server.

If the user clicks an image it removes the image and also the database reference.(8 boxes/inputs can be loaded or used on the screen.

But if some images are not being changed I want to check server side to add new input images only and keep the original name in database and only add the new images using normal file transfer in PHP.

Basically check the database to previously uploaded image/filename and check if exists or not

6

Think I’ve just answered my own question. Lol

7

How do check if filename is number 1 (or first) on php script?
In this object server side - $_FILES[‘images’][‘name’]);

-----------------------------252670993833218404831737572926
Content-Disposition: form-data; name=“images”; filename=“”
Content-Type: application/octet-stream

-----------------------------252670993833218404831737572926
Content-Disposition: form-data; name=“images”; filename=“”
Content-Type: application/octet-stream

-----------------------------252670993833218404831737572926
Content-Disposition: form-data; name=“images”; filename=“453-4530766_violet-clipart-splat-purple-splat-png-transparent-png.jpg”
Content-Type: image/jpeg