Add a input text field - How?

How can I add a < input type = " text " > field??

gyphie's picture

Uh....huh..

Could you be more specific?

Sorry for my bad english:

Sorry for my bad english:
I want to fill in a description of a photo into an input text field by uploading a image. And then I would save the description in a database tabel with a mysql_query in the file: upload.php.
How can I do that?

Something with 'post_params' maybe??

Thanks!

gyphie's picture

Sure

You can update the post_params or you can use the AddFileParam method.

Here's how I would do it:

I have <input id="description" />

In the uploadStart event do this:

function uploadStart(file)
{
this.addFileParam(file.id, "description", document.getElementById("description").value);

return true;
}

That will attach what ever is in the "description" text box to the file upload as each upload starts.

-- Your English seems fine to me.

In handlers.js, I have

In handlers.js, I have change this:

function uploadStart(fileObj) {
try {
/* I don't want to do any file validation or anything, I'll just update the UI and return true to indicate that the upload should start */
var progress = new FileProgress(fileObj, this.customSettings.progressTarget);
progress.SetStatus("Uploading...");
progress.ToggleCancel(true, this);
}
catch (ex) {}

return true;
}

into this:


function uploadStart(fileObj) {
try {
/* I don't want to do any file validation or anything, I'll just update the UI and return true to indicate that the upload should start */
var progress = new FileProgress(fileObj, this.customSettings.progressTarget);
progress.SetStatus("Uploading...");
progress.ToggleCancel(true, this);
}
catch (ex) {}

this.addFileParam(file.id, "description", document.getElementById("description").value);

return true;
}

And in index.php, I have add this: < input type = " text " id = " description " / >

But if I would upload a photo, then I see only: Uploading...
And there's nothing happened!

I use the SWFupload v2.0 Multi-instance Demo.

What do I wrong?

gyphie's picture

Do you really have spaces

Do you really have spaces around your quotes?

id = " description "

means you should use

document.getElementById(" description ").value

Everything in the quotes has to match.

Furthermore, I just gave you a simple example. You should make sure your code properly handles errors. If an element with the ID of "description" is not found my example doesn't bother to check and just tries to read it's value which will cause an error. This would prevent uploadStart from returning and the upload won't start.

Move your code inside the try..catch block and in the catch block it might be good to have something that notifies you (or the user) that an error occured. Then from the catch you can return false to stop the upload.

It wil be not succes. It

It wil be not succes. It don't works!

I'm interested in such feature else

I can't find uploadStart(file) function in handlers.js - I'm using asp.net, and "applicationdemo.net\js\handlers.js" is what I have checked.

gyphie's picture

Build your own

The demo handlers.js just have functions for the events needed for the demo. In your settings you define the handler function for the different events and then you create a JavaScript function for handling that event. It doesn't have to be in the "handlers.js" file but that's just a nice place for them to keep them contained together.

Example please

Could you please make "Sample Application" with +1 text field demo? I guess it's like 5 minutes of your precious time - but I spent many hours already w/o success (JS isn't my native language =) )

Thanks!

P.S. I tryed to use the app back in Sept - didn't succeed then, now expected to see something useful - but nothing changed in demos. Still misty and helly complicated.

P.P.S. Or could you please explain - how to change "Sample application" handlers.js (image upload) to make it work with input text field? Thanks.
ATM I've added string - but it doesn't work:
function uploadProgress(file, bytesLoaded) {
this.addFileParam(file.id, "description", document.getElementById("description").value); // => this string added

gyphie's picture

In uploadProgress it is too

In uploadProgress it is too late to add file params. The file is already being sent.

You have to do this in uploadStart or earlier.

What's why I'm asking about new demo: there is no such function

uploadStart isn't presented at all in handlers.js in "Application Demo" that's why I asked to re-build it.

Added parameter "upload_file_start_callback : uploadFileStart," + function
function uploadFileStart() {
alert('started file!');
}

to handlers.js - didn't see any alerts yet.

Flash itself work like a charm but demo that upload files w/o sending any form data with them is useless... And scripts are too complicated to re-build them w/o deep knowledge of JS.

gyphie's picture

This is JavaScript

SWFUpload is a JavaScript library. You'll have trouble getting anything done if you don't want learn a bit of JavaScript and you don't need a deep knowledge of JavaScript.

All you do is create a function for the uploadStart event handler:

function myUploadStartHandlerFunction(file) {
this.addFileParam(file.id, "name", "value");
}

Then in your SWFupload settings you set your function as the handler for the uploadStart event:

new SWFUpload({
upload_start_handler : myUploadStartHandlerFunction
/* don't forget all your other settings */
});

Pretty simple and it follows the same pattern as everything else. Some demos don't use handle the startUpload event because they don't need to.

Pardon me =)

yup - already read that in instructions (about "upload_start_handler")

Hope just few more weeks left to figure out how to pass dynamic form/POST data with files...

Edit: it took like 1 minute. You really should include that "upload_start_handler" in "Application Demo"

function uploadFileStart(file) {
this.addPostParam('descr',document.getElementById('descr').value);
var continue_with_upload = true;
return continue_with_upload;
}

Edit 2: I'm sorry - I forgot to say "THANK you for the amazing software!" =)

input field value

Hi,

did you manage to pass the input field value to the upload page?
I also need to save that variable in a database