Coldfusion multiple file upload example




















Karim: Issue 1. Replace 'file intFileIndex ' with ' cffile. ServerFile ' - this is the name that CFFile saves the file as on the server. I discovered a problem with the CF file upload thing: file parameters with the same parameter name. They all upload to CF, you just can't retrieve them as easily.

You have to do some undocumented CF to get it to work. Basically, retrieve the temporary CF files from disk yourself. Parsing temp files seems like a lot of work to do for the sake of naming files the same thing; I would suggest just having file inputs with different names. After all, that is really the intent of form fields - to provide unique sets of data.

I am not sure that you should think of files as a single group When the page is submitted to the server for real or via XHR , you assume title[1], description[1], and file[1] all go together. You can count how many items you have by counting the titles. In fact, it makes enumerating your values much easier because there's none of that "title index " complexity.

The next question would be how do you do all the labels and IDs. Well, these just need to be unique, not sequential. So make them unique. I am not sure how it is possible to separate the Title and Description fields in your form post? If either the Title or the Description contain a comma, doesn't that mess everything up?

Perhaps this is just a ColdFusion thing, but when you post a form with duplicate names, they get concatenated into a list. For example, checkbox with the same name ids would become:. Granted, the good thing about the form and url scopes are their ease of retrieving values. Assuming you only want the first value or there are no commas. But they break even the simplest checkbox lists with same name, different values, values containing commas.

It made it nice to do url["foo"] and url["foo"][1], but only if there's no commas. It wouldn't have hurt to provided more advanced objects as well. I use simple scripts to parse the query and body if needs be. You can get an value array by index or a struct by name, array of values. Out of curiosity, where are you grabbing the form data from? Where are you getting the raw data? Loop through uploaded files via count , grab data for each file from its temporary file, and delete its temporary file.

I think you can use getHttpRequestData to get the original filename and extension, I can't remember. Next, display the images related to the ID. Perhaps you could combine this demo with the following one which demonstrates BLOB data type usage :. Hey Ben, I think Alex touched on a topic that I'm actually interested in digging into right now. My question is how do I determine the original filename? What I'm doing is uploading the file and directly inserting it into blob database.

It just irks me to have to cfupload the file to some tmp path, readbinary it before putting it into the database. I figure that instead of cfuploading, I can just readbinary the tmp file and insert that data into the db directly.

I don't know enough about how ColdFusion handles the binary form post to answer that. Understandable - it certainly adds an extra step. But, I think you'll find it's an extra step that makes everything else minus the additional step easier.

This becomes a problem when you go to serve the uploaded files. Especially out of a database. Serving a file requires a mime type, e. This isn't really the best solution. Clients may have more or more recent mime types than the server. Clients may have a different mime type for the same extension. The cffile tag is really a poor implementation. Shortsighted, overly complicated, and incomplete. I don't think there's anyway you can call the CFFile tag "overly complicated".

It really makes uploading super straightforward? How would you go about making it easier? You can't get mime type for multiple file uploads with the same field name. Which is my whole gripe. All your left with is a bunch of binary temp files on the server. You can get the file names from getHttpRequestData. After all, if it's not letting you do what you want it to do, then clearly there is room for improvement.

However, I honestly believe your use case multiple files with the same form field name is an outlier case. I imagine that is why this problem has not been addressed by the server software. Not trying to downplay your requirements - just that they might be more on the unique side of things. Hey Ben, I'm fairly new to Coldfusion, and am not sure how to make the above code work. Im not really sure whats going on here and simply putting the html portion of the code on a page throws up countless errors, whats a CGI script and how do I implement this from a beginners point of view?

You don't actually have to specify the value for the action attribute, if you're just posting to the same page. Yeah, exactly what Yuliang said.

It's basically an easy way to say "post back to yourself" without having to couple the page to an actual URL. Actually, I wanted to know whether it would be possible to select a folder instead of a file using CF? The idea is to automate this process to the maximum, i.

Upload to Server, the program just copies everything from the user's selected folder to a destination folder on the server, and then the cfdirectory would read the destination folder on the server and do the processing. But before reaching the point where cfdirectory operates, all the files need to be copied from the user's selected folder first.

Now, to be able to copy those files, the user needs to tell the program from which folder the files need to be copied from. If you have CF installed on your pc and you want to set up a Microsoft Access datasource in your CF Admin, then, when you locate the file, the Java Applet displays your local pc's My Computer hierarchy, allowing you to browse to the location of the database. I don't know about Java, but Flash has a security check to prevent the program from programatically selecting a file from the user's filesystem and upload it to the server.

I display the image after submission on the submitting page, as well, but I use cfsavecontent to save the HTML generated from with a component method and return that content in a struct variable that I then append to the DOM in the callback of the AJAX function.

I guess we're both getting to the same place by different means. I'm just always curious to learn a new approach to accomplishing something.

Hi Rick. Yeah exactly. Normally, like with adding a comment or status update for example, you would submit the comment via ajax and then in the callback receive the HTML of the comment and append it to the DOM.

Fairly simple in that example, but in this case there was no actual ajax taking place, more of a spoof. Hence, when passing the HTML for my image upload back, the code was bombing slightly and thus my changes were necessary.

How are you doing yours with an ajax callback?? Like you I'm keen to see other ways of accomplishing the same thing. I used Ben's iFrame code for submitting the fields and image, then in the component method I process the image and run the insert query. The first method, if there's not too much data, is just easier because I don't have to worry about inserting the new record in the correct place in the already displayed records. I used a modal window to display the forms for adding, updating, and deleting so the user never has to leave the initial page that displays the records.

I've been doing it this way for awhile and just hacked this approach together from Ben's post and other sources. I learn enough to get the task at hand accomplished satisfactorily and then be dangerous in threads like this.

Hi again Rick. I'm just a little confused - this method of Ben's doesn't use AJAX, so there is no ajax post and thus no ajax callback as far as I can see. But obviously I'm missing something because you keep talking about the "ajax callback function".

I'm assuming, like what I did, you simply mean a function that you call once you have the hidden frame response. For example:. The first submission uses Ben's iFrame approach, with a function call added that triggers a true AJAX call to retrieve the updated data and display it on the initial records display page. So, the iFrame method is used to process the initial form, then the process is handed off to an AJAX function for retrieval of updated data. Ah ok, I follow. So in your case, once the post has been done via the iFrame, you don't really get anything back.

Then you call another ajax function that retrieves the data and sends back the formatted html as required. Whereas in my example I send back the data directly via the iFrame. So no ajax actually takes place. Interesting method Rick. Could definitely work in my case too. I'm actually surprised it didn't cross my mind to do it that way when I was struggling with it the iframe way. So there we have it - two ways to skin a cat :.

For one of my projects I had to build a form with ton of information to gather that would also accept an image file. The image file needed to be cropped using jCrop jQuery plugin. The process of cropping entails an upload of temp file onto the server, which would require ajax post.

So, I have gone pretty much the same route and ended up using jQuery's upload plugin. GOt everything to work just fine but then when I did the push to the staging server, I started getting the "missing in parenthetical".

I had a typo in the variable defining the path on the staging server where the temp files would be stored. But because of iframes how would you see that from the response window of firebug?!? One useful thing I discovered for this is using HttpFox plugin. I tracks any http interaction going on between your client browser and the server. I haven't heard of HttpFox, but I'll check it out. Concerning finding errors generated using the iFrame Normally, the iFrame is removed after the submission, but when an error occurs, the iFrame is left in the HTML code, along with the ColdFusion error message, if something happened in the ColdFusion processing.

So, if you get no response from Firebug, try looking at the bottom of the HTML code in Firebug and find the iFrame and see if there is any error code in there. I saw the iframe disappear when things were working, thus I gave up and didn't know an iframe would actually remain in the html if an error occurred. So that's good to know.. That's how I saw that ColdFusion error message that it couldn't write to the path specified.

I want to config upload file size larger, more than MB, but with size large. It not work I need help. Thanks all. If you're using IIS7, you may need to change a variable which limits the "post" size for forms. What I'd like to happen after all fields are filled: submit form database insert get ID of insert trigger upload image rename image with insert id. But this script hijacks form submit, I cant trigger it with anything it seems.

So with this approach my steps would then be The only thing that gets returned is the name of the file that was uploaded. To prevent that, I used. The only place where that doesn't work is if you have html inside the json. In that case, you just have to make sure you are properly encoding the return page. I guess in most cases this wouldn't present a problem anyway if you were simply taking text from the json and appending it to an html element, the characters would get encoded anyway. Code doesn't work for me.

Read the entire article. No luck. Hi Ben, I want to use the above upload file plugin in a form which I will be submitting to a Servlet. I was able to get that in action we have to give the url of the Servlet but I am not able to understand that what is going on in. Any Help with a demo code to use this plugin with a Servlet will be of great help to me.

TIA Nazar. Light Dark. We dont know if or how many files are going to be uploaded at this point. Janet May 29, at AM 1 Comments. Thanks for posting the "secret iFrame" route it works like a charm! Drew May 29, at PM 1 Comments. Harvey, Hmmm. You had the jQuery javascript file included, right? All, I just found a small bug in IE. Steve Jun 27, at PM 2 Comments. Steve, I get that occasionally, but it seems to be hit or miss. Mahesh Jul 22, at AM 4 Comments.

File 1: client. Mahesh, Very cool. Mahesh, Thanks man. Mahesh Jul 22, at PM 4 Comments. Mahesh, Corrent; I have found that you need to set the "encoding" as well with IE. Josh Aug 5, at AM 1 Comments. I don't know if you will use it or not, but hey I thought I'd show my tweaks. Josh Aug 5, at PM 1 Comments. Josh, I am not sure if there is any difference between using the [object].

Cheers -Josh. Sam, No problem man. Lots of people say its good to be always thinking though Sam, Hmm, maybe if I don't remove the iFrame, it will help.

I updated the example code to have the a slight delay on the frame removal: setTimeout. Steve Oct 26, at PM 2 Comments. Ben, how would you integrate progress bar? Any ideas? Hi, Ben Suggestions on what to look for? Thanks for the tutorial! I figured out what the problem was, Ben. The error message, indeed, was code from CF error. Would that be a recommended approach? Rick, Usually what I do, when dealing with complex forms, is to upload the file and return some sort file ID.

So, when dealing with files, I have a two passes: 1. Hoy Apr 28, at PM 1 Comments. Is that any way we can catch the later added object? Dave Jun 2, at PM 9 Comments. Just kidding. What I did was put in the absolute path for the secondary page that takes the upload Dave Jun 3, at PM 9 Comments. Thanks Ben for the great tips, I've been coming back a bunch. So I'm guessing if there's more than one form here that it won't work as is correct? I've tried using both ID and Name with no luck.

Cheers, Ty. Dave Jun 4, at AM 9 Comments. Can you guys give me some insight or help me with this issue? Thanks, Dave. Ty, You just need to come up with some way to identify the form so that it can be referenced later. Dave Jun 4, at PM 9 Comments. Ty, thanks for the quick reply.. Dave Jun 9, at PM 9 Comments.

Any other ideas, Sir Anyone tried to use Ben's technique within a modal window? Anyone accomplished this and willing to work with me to get my code working? Rick, Are you loading the form dynamically into the modal window? Just can't quite seem to make the connection. Thanks for any insight Yogesh Aug 24, at AM 9 Comments. Hi Ben, Many thanks for this very useful post! Would it be possible to have the jquery Thanks in advance.

Best regards! Andrew, This sounds very interesting. Just managed to get this code working on my site The form seems to be getting submitted, as the page reloads, is there anyway of preventing this?

I generally use return false at the end of the function, but that doesnt seem to be working in this instance Thanks. John, That probably means you are getting a Javascript error. If you provide a file extension in the attribute accept, the extension overrides the blocked extension list in the server or application settings. The file then gets uploaded. Values specified in the attribute allowedExtensions overrides the list of blocked extensions in the server or application settings.

Applies to Windows. A comma-delimited list of attributes to set on the file. If omitted, the file's attributes are maintained. Each value must be specified explicitly. Octal values of chmod command. Assigned to owner , group, and other, respectively, for example:. Lets you specify a name for the variable in which cffile returns the result or status parameters. If you do not specify a value for this attribute, cffile uses the prefix cffile. For more information, see Usage. By default, when uploading a file fails, the remaining files will not be uploaded.

If this value is set to true, file upload continues even after encountering an upload error. A file upload error happens due to the following reasons:. Empty file 2. Invalid file type 3. Invalid MIME or extension 4. File already exists. The name of the variable in which the file upload errors will be stored. Errors will be populated in the specified variable name when continueOnError is true. After the file upload is completed, this tag creates an array of structures that contains upload failure information for each upload failure.



0コメント

  • 1000 / 1000