How to keep Uploadcare image in forms?

Question

I have a form which I want to validate with PHP. The poster upload from Uploadcare's widget is part of that form.

Sometimes users have to go backward in the form to fix stuff - an incorrect email, etc. I want to have the chosen upload file persist within that form.

This works when the back button is clicked, but I cant rely on that. I'm using PHP POST variables to reload and repopulate the form.

My question: can I use a POST variables with the Uploadcare input button to make it "remember" and reload the chosen picture the user has previously uploaded?

My current code.

<input type="hidden"
       role="uploadcare-uploader"
       data-preview-step="true"
       data images-only="true"
       name="adposter"
       style="display: inline-block;" />

Is it possible to do something like:

<input type="hidden"
       role="uploadcare-uploader"
       data-preview-step="true"
       data-images-only="true"
       name="adposter"
       style="display: inline-block;" 
       value="<?php print isset($_POST["adposter"]) ? htmlspecialchars($_POST["adposter"]) : ""; ?>"
/>

As one would with other fields? Obviously the Uploadcare input widget has its own way of doing things, hence the query.

The `$_POST` variable is used to receive the data that is sent by the browser and you cannot use it to pass variables to an HTML template. However, you may simply set a variable in PHP to the file id and then use it as `" />` — max, Mar 12 '16 at 18:13

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

As the documentation says:

The value of [role=uploadcare-uploader] input is either empty or CDN link with file UUID.

If you externally set the value of the input and trigger the DOM change event, it will be reflected in the widget. For example, setting it to a file UUID or a CDN link will show that file as uploaded in the widget. You can do this on a live widget or even before it's actually loaded.

So your second snippet should work correctly.

You may also want to know the way to set widget's value via JS:

var widget = uploadcare.Widget('[role=uploadcare-uploader]');
widget.value("https://ucarecdn.com/e8ebfe20-8c11-4a94-9b40-52ecad7d8d1a/billmurray.jpg");

score 1 · Answer 2 · edited Mar 14 '16 at 09:27

1

Sorted this. It can be done with Value. Great!

https://uploadcare.com/documentation/widget/#input-value

edited Mar 14 '16 at 09:27

Dmitry Mukhin

6,649
3
29
31

answered Mar 12 '16 at 20:49

earl grey

43
3

Fin · Answer 3 · 2016-03-12T19:04:16.683

You can use $_POST to pass on variables from the one form to another just as you described using hidden fields. But this is not very efficient and as you write the information back to the client, they could change that.

A better way to save these kind of variables is to make use of $_SESSION:

The session support allows you to store data between requests in the $_SESSION superglobal array. When a visitor accesses your site, PHP will check automatically (if session.auto_start is set to 1) or on your request (explicitly through session_start()) whether a specific session id has been sent with the request. If this is the case, the prior saved environment is recreated. http://php.net/manual/en/intro.session.php

So after the image was uploaded you store the image id in a $_SESSION:

session_start();
$_SESSION['imageid'] = 123456;

Then even forms later you can access the imageid simply by using the $_SESSION variable again:

session_start();
var_dump($_SESSION['imageid']);

int 123456

See the php documentation for more information on sessions: http://php.net/manual/en/book.session.php

Thanks guys - I should have clarified - my question is more in relation to how the Uploadcare input type will accept Value="xxxx". So say for example Uploadcare takes a file from the user, and gives it the id, say, 859510a2-b15b-4fb3-9b02-08c95685dffd. After upload, the widget typically tells the user the name of the file they uploaded and its filesize - like "image.gif, 33kb." My question is whether I can supply the id - 859510a2-b15b-4fb3-9b02-08c95685dffd - back into the html form as an input element Value, and if the u/c widget will accept that. I've taken on board the Session thing :) — earl grey, Mar 12 '16 at 20:14

How to keep Uploadcare image in forms?

3 Answers3