I'm currently in need of develop a website that allow user to input information and images into a <textarea> then save to database. Those data will be displayed in another page.
I though of using AJAX to upload file then append the <img> to <textarea>. But this approach will produce SQL injection security threat.
So I need an advice on how to achieve this but still can get rid of SQL injection.
When the user uploads an image, just do the following and you will be safe to append the image HTML to the textarea:
Is the user upload a valid JPG/GIF/PNG/x image? (Use image libraries to verify that.)
Rename the image to something "safe" like a CRC32 of its contents + the current time in microseconds so the file name is innocuous.
Put the image with its new name in a location that can be served.
you'll find you cant upload files using ajax - you will want to find a plugin for that. I'd reccomend looking at https://github.com/blueimp/jQuery-File-Upload/wiki - although it may have too many features. Theres even an mvc3 example for it! https://github.com/maxpavlov/jQuery-File-Upload.MVC3
After you upload the image, I suppose you can trigger another ajax event to retrieve the image and then display it in a div next to the text area.
As far as security issues, I've been told allowing a user to upload a file is inherently insecure. see https://github.com/blueimp/jQuery-File-Upload/wiki/Security for more details.
My apologies for the excess links. Also, if you're storing many, many files with infrequent access, you may want to consider saving the files to disk. ie. write them to a network location and store the filename in a table (save the file on disk with a GUID).
ie. Table UserFileLocations
PK | UserFileName | DiskID
1..n | tree.jpg | //ServerPath/Folder/103c-aa34-0ac2-01cd
...
Related
This is more of a general question about whether or not its actually possible to achieve what I want.
The basis is that my app allows the user to fill out various tables of data for a preventative maintenance check sheet. They can also attach images to this sheet which saves to the temporary storage on the IOS app. Once its complete they then press a button which generates a HTML document through a StreamWriter. Through this StreamWriter I have created, the images are also appended through URL references to the images in the temporary folder.
The HTML file (Generated Form) is then presented to the user using a WebView. Once the user has checked all the information, they then press a button which presents a MailViewController.
The HTML file (Generated Form) is then automatically attached and once the email has been entered you press send and everything works as it should.
The problem I am now having is that im not sure if its possible to keep the images in the html document. Once you open the HTML file on the receiving device, the images no longer loads because they no longer exist according to the HTML file.
So basically is it possible to keep the images in the HTML file once opened on the receiving device.
Sorry for the long description but its needed so you get an understanding of what I am actually doing. All the code I have written works as it should but just wanted to know if this is possible or not.
Thanks
Jamie
Use base 64 encoded strings for the images and it should work. Since the images would be passed along with the html
I am developing an ASP.NET website. In the website users needs to create an account and then they can upload videos of their work. Viewers can view it freely. I use html5 <video> tag to display videos. I am using sql server database. Now where to store the videos when the user uploads it? Should I store all the videos in same folder? If yes then there can be multiple videos of same name. How to deal with that?
A solution is to embed an id in the name, one way or another.
You can prefix it like this
343-Video.mp4, 344-Video.mp4, 345-How to make a sandwich.mp4
Or you can replace the entire thing with a guid and store all information in the database.
If you go with the guid, I would personally store all the videos in the same folder out of convinience, to make retrieval as simple as possible. A problem with this is SEO, search engines love file names and they don't like IDs in the names.
To get file names, you can either make folders and name them the IDs and put the videos in there or you can make a controller that will serve the files from an id. The simplests of those is by far to have folders with IDs as the names then have the videos in there, you can also fittingly store the same video of different formats in there.
/videos/343/How to make a sandwich.mp4, /videos/343/How to make a sandwich.webm
/videos/344/video.mp4, /videos/344/video.webm
That is if you have plenty of storage and want to use your own server, otherwise you can save a lot of server costs(Both storage and trafic) by using a service to host your videos, e.g. YouTube or Vimeo
You would want to tag the videos with some kind of ID associated with them, especially if they might have the same name. Basically, you'll store a record in a table that contains the information (who uploaded, upload date, video type, etc.) for the upload. You'll also want to store the path to the actual file on the file server where you're storing the videos and then use that path to view them.
upload videos in each user's folder or assign a random unique name to videos (like Guid) then add a row to the database indicating the actual name and folder of video file.
Look at this answer for filename coding: https://stackoverflow.com/a/1638761/844044
In SQL you keep a link between original filename (or the name you want to display) and the base64 filename you generate.
There might be collisions on the base64 filename you generate (this should be randomly generated) but that would be trivial to solve.
also: https://www.youtube.com/watch?v=gocwRvLhDf8, on the youtube filename
So I have this website where users can post articles, each article containing at least one photo. What I want to do is when I display the list of articles on the website I want to also show a thumbnail next to the articles name.
Here comes the tricky part: the images are not hosted on my server, are simply links hosted on some image-hosting website. Another problem is that I don't know where the images appear in the post (they could be at the beginning, at the end or in the middle of the article).
What would be the best approach to create a thumbnail system in this case?
I was thinking maybe I could do this: every time an article is posted or edited and stored into the database I could scan the entire articles for images links and store the first link in a separate value in the database (this could be kind of slow though).
Also once I have those values stored and I have to display a thumbnail the only way to do so will be by showing the full image resized to the thumbnail size (that means the user has to download multiple full-size images to see the articles list with thumbnails).
Is there any better approach? (you can see the technologies used in the tags)
Create a thumbnails task that runs in the background after an article has been published.
Find image tags in the article HTML using regular expression.
Get those images and create and thumbnail that you save locally in a folder in your server.
Protect that folder/location against hotlinking.
Use those local pictures as thumbnails
Use HtmlAgilityPack as a starter to get to the images from the image host.
Use an ASP.NET handler to generate the thumbnails. That way, you won't have to store anything locally, the thumbnails images will only exist in memory, making hotlinking impossible
User need to upload 30,000 csv values, these values may contain 16 digit numbers or zipcodes.
Now our asp.net project doesn't use AJAX tool kit controls or jquery or any other 3rd party controls or open source code. This is restriction as per companies privacy policy.
So I have to come with a best way to accommodate file upload feature. This has to be versatile in regards to re-usability some thing like a custom control
This file upload feature should not be saved on the server, instead I need to read data into stream buffer and send them to UI then once user verify these values he/she'll have to hit submit thus values will be saved to DB.
what are the best ways to implement this,
Can I make use of System.Net.Webclient? or
Is there any other alternative ways by using Async HttpHandlers?
Can I show file upload progress to UI ?
Appreciate if you could help me with proper guidence on this.
Thanks in advance
krish
Well 30,000 values of zipcode or any other 16 digit code should be uploadable normally using file control(i mean via postback).
if you have to read and show 30,000 on the UI, i presume you are at risk of freezing your UI.
Moreover if you are not on HTML5, there is no way that you can read the content on the client side, except if you fiddle around with flash.
HTML 5 file api reference
http://www.html5rocks.com/en/tutorials/file/filesystem/
How to read and write files with Flash(Action script)
http://www.mikechambers.com/blog/2008/08/20/reading-and-writing-local-files-in-flash-player-10/
I have a FileUpload control in my aspx page and I want to display the image selected before postback so that user confirms the image to upload.
You can use this AJAX Control Toolkit Control for Image Confirmation.
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/AsyncFileUpload/AsyncFileUpload.aspx
What you're looking for would require a pure client-side solution, which I do not think is possible since they do not have access to the file system(under normal circumstances).
Note that using AJAX requires actually sending the file to the server first.
This Can be done VIA HTML5 now,
http://www.html5rocks.com/en/tutorials/file/dndfiles/
When the upload is selected you want to read the file with
readAsBinaryString
Then you would need to turn that binary to Base64 so you could display it on the page,
http://www.webtoolkit.info/javascript-base64.html
Then you will need to put it into an img tag on the in the src E.G
<img src="data:{image/mime_type};base64,{base64_binary_data}" width="100" height="100" />
Where {image/mime_type} is the mime type of the image they have uploaded E.G image/png, image/jpg
And {base64_binary_data} is the readAsBinaryString after it's gone though the base64 conversion
It's not possible through HTML. But it may be possible using flash/silverlight.
I say this because I remember coming across an issue when I wanted to know up front how big a file was before the user uploaded it. Html doesn't give you the ability to know this, the user must upload the whole file before you can say how big it is.
However, the workaround was to use flash because flash seems to have permissions to grab data about a file from the local disk before sending it to the server (after the user selects the file of course). Since it can grab the filename, size, etc then I imagine you'll be able to grab the image data too and then display it.
You're going to need to use flash or silverlight to do that.
Here's an article where it's explained how to do that with flash:
http://blog.flexexamples.com/2008/08/25/previewing-an-image-before-uploading-it-using-the-filereference-class-in-flash-player-10/