How to set file input contents from variable in Add page?

PHPMaker General Discussion (PHPMaker)
1

I’m trying to programmatically set a file field in the add form, getting the contents from a JS variable. I’ve had success with a TXT file, but cannot do it with a PNG image.

This works:

$("#myButton").click(function() {
    var fileString = "This is the contents of the test file.";
    const myFileContents = [fileString];
    const myFile = new File(myFileContents, "file01.txt", { type: "text/plain" });
    const dataTransfer = new DataTransfer();
    dataTransfer.items.add(myFile);
    $('#x_FILEFIELD')[0].files = dataTransfer.files;
    $('#x_FILEFIELD').trigger("change");
});

But, making the necessary changes for a PNG file, it doesn’t work:

$("#myButton").click(function() {
    var fileString = "iVBORw0KGgoAAAANSUhEUgAAAQAAAAEAAQMAAABmvDolAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABcUlEQVRoge3VsW2FMBCA4SMUlGQDRkjKdKyVIhIeJaN4hIzgEVyiyLJj9BwHDp25hx9SinOBLN1XgPzLQDhYIECAAAECBAgQICCET3gqAg8AUwm4CIYqMHNAXwVsBN21wETQXgt0BM21QEUA14JljpJ6MIjNPgOMFSA2+3oE3nC194HY7DuuFoOPOhCbdUfA46zvAwYaj6vFINQBHYe42h1QVUDFT1So2h3QVWA5B42q3QFTAJ4BhgWMRWBrgFtmFmW9A3MBzAwwLY++CHDWa2AT6AogHAPc/RqYBFoaNAyAu18DnUBDg5YDFA1UAkCDjgM0DW7HhLrfgu4IpEUAn8F4Ejg+GE6CmQ/6k8Bm0F0FTAbtVUBn0JwGtwEJVAZAgZYHFAXgD0wE6Iog3z2aAUYC9DxgCOBWYCgCS4B8zXNAfwrkn9W8qfaRwPwegWOAtgg8DUIdsLl24iW/4SXtvvJuA4glQIAAAQIECBAg4N+CH3/WZDvRR7ZFAAAAAElFTkSuQmCC";
    const myFileContents = [atob(fileString)];
    const myFile = new File(myFileContents, "image.png", { type: "image/png" });
    const dataTransfer = new DataTransfer();
    dataTransfer.items.add(myFile);
    $('#x_FILEFIELD')[0].files = dataTransfer.files;
    $('#x_FILEFIELD').trigger("change");
});

fileString is a valid, base64 encoded PNG. What I get is:

  1. if FILEFIELD’s view tag is IMAGE, nothing happens, not even an error. I’m guessing I’m not triggering the correct event;
  2. if FILEFIELD’s view tag is FORMATED TEXT, i get this error:

Clipboard_04-08-2026_01
Clipboard_04-08-2026_01429×182 13.1 KB

Both TXT and PNG are allowed file types. No temp file gets written server side.

Any ideas? Thanks in advance.

2

Note that your code only means you have selected a file automatically, not that you have uploaded it. When you submit the form, the file is uploaded with other data.

But PHPMaker does not work like that, it uses jQuery File Upload, when you upload a file, it is uploaded immediately after you selected the file, then you submit the form.

So triggering change event is not enough, you need to add the file to jQuery File Upload, e.g. (don't just copy and paste, you may need to modify as needed)

$('#x_FILEFIELD').fileupload('add', {
    files: [myFile]
});

You may also use 'send' method, read jQuery File Upload's doc on Programmatic file upload.

(If you want a default value for file input field, it might be better to use Row_Inserting server event.)

3

Actually, triggering the ‘change’ event does call the ‘fileupload’ method. I’m not setting a default value, I’m generating a file locally, but I omitted that logic here for simplicity.

In the end, I found out that, when uploading a binary file, decoding the base64 string with the ‘atob’ function is not enough. Now everything works. Thanks for pointing me to the blueimp wiki. I had no idea that is the pertinent tool in this case.

If you don’t mind me saying, I wish the manual page about third-party tools had a little more information on where which tool is used inside PHPMaker, so that users can dig up solutions more easily on their own, which could mean less help seeking posts in the forum.

4

The docs on FILE Edit Tag does say:

By default jQuery File Upload and drop zone will be used