Uploading images to my website server - error saving to server

Are you using CF8? If so you can use the built in ImageResize() function to rescale the image. If you are using MX7, try one of the free image components out there like Image.cfc. There are also others, and cfx tags, though not all of them are free.

 

I use CFMX7...

I found the image cfc http://www.opensourcecf.com/imagecfc/. It seems simple enough to integrate into my site.

 

Yep. That is the one. Sorry, I just realized I forgot to post a link to it! That would have helped

 

Ok... I need a little help. It 'should be' simple...

So, if the user has an image uploaded, it pulls it onto their page. If not, there's a default image "an1.jpg" that is shown:

<cfif #SESSION.auth.CLIENT_FILE_NAME# NEQ "">

<cfoutput><img src="/user_uploads/#SESSION.auth.CLIENT_FILE_NAME#" /></cfoutput>
<cfelse>
<img src="images/an1.png" />
</cfif>

Code (markup):

Simple. But now, I want to ensure that the image they upload (which has already met the file size criterion), now can fit within my 200px by 250px portion of the screen.

So, my criteria are now:

1. If the image has H<250 and W<200, leave the image alone and display it.
2. If the image has H<250 and W>200, "scale width" image.cfc function to make the width 200.
3. If the image has H>250 and W<200, "scale height" image.cfc function to make the height 250.
4. If the image has H>250 and W>200, "resize" image.cfc function to make height 250 and width 200.

That's it. Now, I need to figure out how to include an image's "height" or "width" in pixels within an IF statement. I think I can do this with the "GetImageInfo" function of image.cfc. The example code in its documentation is as such:

<cfset imageCFC = createObject("component","image")>
<cfset imgInfo = imageCFC.getImageInfo("", "C:\Inetpub\wwwroot\myimage.jpg")>
<cfoutput>
Image Dimensions: #imgInfo.width# x #imgInfo.height#
</cfoutput>

Code (markup):

I guess I can then use:

<cfoutput>
Image Dimensions: #imgInfo.width# x #imgInfo.height#
</cfoutput>

Code (markup):

dimensions in my IF statements.

But then I run into a problem with, say, #2 above. The "Scale width" function example is as follows:

<cfset imageCFC = createObject("component","image")>
<cfset imgInfo = imageCFC.scaleWidth("", "C:\Inetpub\wwwroot\myimage.jpg", "[COLOR="red"][B]C:\Inetpub\wwwroot\tn_myimage.jpg",[/B][/COLOR]100)>
<img src="myimage.jpg" width="100" alt="resized image"/>

Code (markup):

I don't get what the red portion above is supposed to be. It says "File path to write the output, or a blank string." but does this mean it'd need to create a new image each time the page would be executed? That sounds dumb... This is what I would do for #2, but don't know how to deal with the red portion.

<cfif #SESSION.auth.CLIENT_FILE_NAME# NEQ "">

<cfset imageCFC = createObject("component","image")>
<cfset imgInfo = imageCFC.getImageInfo("", "/user_uploads/#SESSION.auth.CLIENT_FILE_NAME#")>
<cfoutput>
Image Dimensions: #imgInfo.width# x #imgInfo.height#
</cfoutput>

<cfif #imgInfo.width# GT 200>


<cfset imageCFC = createObject("component","image")>
<cfset imgInfo = imageCFC.scaleWidth("", "/user_uploads/#SESSION.auth.CLIENT_FILE_NAME#", [COLOR="red"][B]"/user_uploads/tn_#SESSION.auth.CLIENT_FILE_NAME#",[/B][/COLOR]200)>
<img src="/user_uploads/#SESSION.auth.CLIENT_FILE_NAME#" width="200" alt="resized image"/>


<cfoutput><img src="/user_uploads/[COLOR="Red"][B]tn_#[/B][/COLOR]SESSION.auth.CLIENT_FILE_NAME#" /></cfoutput>
<cfelse>

<cfoutput><img src="/user_uploads/#SESSION.auth.CLIENT_FILE_NAME#" /></cfoutput>
</cfif>
<cfelse>
<img src="images/an1.png" />
</cfif>

Code (markup):

 

Yes. But you definitely don't want to do the resizing when the page is viewed. It should be done once, when the image is uploaded. Then you'll always be working with the correct image size.

Now, I would probably scale the image proportionally, so it is not distorted. But if you want the images to always be 200 x 250, then you could simply say

<cfif imgInfo.width NEQ 200 OR imgInfo.height NEQ 250>
... resize it to 200 x 250 ...
</cfif>

.. and instead of using scaleWidth, I would try the resize() function
http://www.opensourcecf.com/imagecfc/docs/resize.cfm

I think it just means if you want to save the resized image to a file, then supply the path to the output file. If you want to return it as a variable, then use an empty string.

 

OK... I got it working. I just have 1 issue dealing with duplicates.


Say for example, there exists a file called "Untitled-1.jpg" in my "user_uploads" folder. Then, another user tries uploading an image with the same name, and my following code executes:

<cffile action="upload" filefield="ul_path" destination="C:\CFusionMX7\wwwroot\mywebsite\user_uploads" accept="image/jpeg, image/bmp, image/gif, image/jpg, image/svg, image/pjpeg, image/pjpg, image/png, image/x-png" nameconflict="[COLOR="Red"]makeunique[/COLOR]">

Code (markup):

This will cause the file to be renamed to Untitled-2.jpg and saved in the user_uploads folder, however, the CFFILE.clientFile variable will still be "Untitled-1.jpg", and my code references the file already stored there rather than the newly uploaded file.

My question: How can I set a variable to equal the new file name that the "makeunique" function did so there wouldn't be a duplicate? I mean, all my code on the action page needs to point to the newly uploaded file, and will reference the wrong file if there's a duplicate name.

Thanks

 

For anything relating to the final file on the server, use cffile.server* variables, instead of cffile.client*. Use CFFILE.serverFile

 

No, I've tried that. The server file name is simply "Upload**" where ** is just a number, start with 1,2,3,4,5,6... and so on. Then, when I check the folder for the uploaded file, it's named the same as the client file name. I cannot see any connection between server file name and the actual file.

I'm thinking as a workaround, to use the image.cfc component, and doing some sort of "fake" resize, just so I can create a new file with a new name of my choice. This way, I can name the file and include the user's ID, etc to differentiate the files in the directory. Then, I can run a simply function to delete the original file with the client file name.

 

I'm thinking as a workaround, to use the image.cfc component, and doing some sort of "fake" resize, just so I can create a new file with a new name of my choice.

Code (markup):

Actually, that won't work. Because it'll still reference the wrong file that already exists in the directory.

 

No, that can't be. When you use makeunique, CFFILE.ServerFile is always the new name of the file as it was saved on the server, assuming it was actually saved. CFFILE.fileWasSaved will tell you that.

For example, I uploaded a file named "Untitled-1.jpg" to my images directory. Since it already contained a file by that name, the file was saved as "Untitled-11.jpg". The ClientFileName was still the same of course. ie Untitled-1.jpg.

 

I've done the same and receive the same exact result. However, my problem is with the Cffile.serverFile being Untitled-11.jpg. So, when I do the same example, I get the following:

cffile.clientfile = Untitled-1.jpg
cffile.serverfile = Upload51
File name in my upload directory = Untitled-11.jpg

Do you see what I mean? I don't know if I have a specific setting wrong, but for some reason, serverfile has defaulted to Upload and a number, rather than the actual file name.

Here's my code, but i don't see what could be wrong. I even checked Forta's book, and can't seem to find a reason for this issue.

	<cffile action="upload" filefield="ul_path" destination="#ExpandPath("/upload")#" accept="image/jpeg, image/gif, image/jpg, image/svg, image/pjpeg, image/pjpg, image/png, image/x-png" nameconflict="makeunique">

Code (markup):

Also, a side question... When I reference files in my upload folder to edit on my local machine, I use the following:

<cfset imageCFC = createObject("component","image")>
<cfset imgInfo = imageCFC.getImageInfo("", "[COLOR="Red"][B]C:\CFusionMX7\wwwroot\mywebsite\user_uploads\[/B][/COLOR]Untitled-1.jpg)>

Code (markup):

When I upload this to my website server, obviously I will need to change the red portion above. Will that same "expandpath" function work for this?

Thanks

 

Are you sure it is being uploaded at all, and that it is being uploaded to the right place? I suspect it is not. Dump the cffile scope right the after the upload. Looking at all of the values should tell you what is going wrong.

<cffile action="upload" ...>
<cfdump var="#cffile#">

Code (markup):

Yes, using ExpandPath(...) with the correct relative path should do the trick.

 

Somehow (I don't know what I did), it's now working. Regardless, you were right and I was wong - I must've corrected it along the way.


Thanks also for the expandpath question.

 

Yes, I just did the same myself. I have no idea how I distorted the example that was given to me, but obviously I must have.

At any rate, I said thanks, it is working now and that's all that is important to me