I have a basic defense on the client (React.js) to check for the file and size. That provides small security as the yser can change the extension and upload any file type on the server.
I did this type of checking previously using Image Magick on the Express.js project, and that worked very nicely.
This time, I do not need all of the weapons Image magick providesm just need to make sure that the file is indeed an image. Is there an alternative?
If not, than I will end up using IM, but really would be nice to have some small sized library that just does this.
Related
I'm thinking using S3 Amazon for storage (if you guys have better one, don't hesitate to recommend). I could do a normal file upload, but let's say I'm uploading a very large video/music file (something > 20mb), I will hit php upload maxfilesize.
Yes I can just set php_max_filesize value but I am thinking something else.
How to break those files into smaller chunks, and upload each chunks (like how you download torrent files, they each have the download chunks)? And stopping and continuing them anytime the user wants?
This (http://www.hjsplit.org/php/) does not work, because it needs to read the file ON THE SERVER first, before uploading it, so it's useless. Are there any Laravel/PHP/JS library for this?
Or, I wonder how youtube did it?
The way Chunked Uploads work is by splitting the files into pieces in Javascript and sending the pieces numbered to the backend, and then the backend typically just copies the content of each chunk it receives into a file it creates and keeps counting up the size of the chunks until they make up the full size of the original file you wanted to upload.
As far as packages, look at the official AWS SDK for PHP http://docs.aws.amazon.com/AmazonS3/latest/dev/usingHLmpuPHP.html
Look at the second example which uses their multipart upload feature.
Building a upload profile picture system.
Looking for a system to allow square images and allow user to select small part of large image (means need cropping). Also validate based on size and dimensions as per needs.
Client side cropping
HTML5 canvas and localstorage based solutions are present like ngImgCrop, Angular Image Crop, but there are problems like -
image distorts if high resultion (more than 1 MB)
may be not supported in some old (non-html5) browsers
Server side cropping
Solutions like Jcrop but long workflow and time/bandwidth consuming.
client needs to send full large file to server even if its 5MB
then download it again from server to preview
then show crop UI and send crop co-ordinates
server performs cropping and creates file
cropped image is downloaded and displayed
What will be the best approach. Tell me more pros and cons of each. What should a great startup do and what is the industry standard solution as of now and why?
The best answer to this mainly depends on your target audience. Many people who are used to using online services will have a pre-cropped or small version of their profile image ready to upload, and will know not to try to upload a 20 mega-pixel photo. If your target audience is more traditional, then you will probably want to shift your approach to be more forgiving and focussed on older, widely supported technologies.
For me, the best solution is the following:
Focus on a client-side solution - have the user crop the photo on the client side, then optimise it on the server.
To counter the massive photo image, either have a simple label "max file size: 1mb", or check the file size when they initially select the photo, and upload & resize/compress it first.
What should a great startup do and what is the industry standard solution as of now and why?
A great startup should not be restricted or over-influenced by industry standards and should reason through the various approaches themselves.
We have a single-page application (Rails back-end, Ember.js front-end) where we're currently moving away from a server-side image uploader to a client-side image uploader. We previously used the Carrierwave gem to do resizing and sending to S3 on the server. Now we want to the resizing (using HTML5 Canvas and File API) and sending to S3 directly on the client.
This works well when the user selects an image from his computer. It's definitely way faster for the user and puts less load on the server.
However, our users have gotten used to the "Upload by URL" functionality that we offered. It works like the "Search by image" functionality on Google Image Search. Instead of selecting a file from his computer, the user pastes a URL to an image.
Because of the same-origin policy, we cannot use Canvas API on an external image (it becomes tainted, see https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Using_images_from_other_domains).
I see two possible solutions:
In order to be able to upload to S3 directly from the client, we need to generate a pre-signed key on the server. We could pass the URL to the image in that same request, download it on the server while we generate the pre-signed key, and put the image as base64 payload in the response.
Use a proxy on our domain and use it to bypass the SOP. So access the image on the client as https://www.mydomain.com/?link=http://www.link.to/image/selected/by/user.jpg.
My questions are:
Do you know any other way to bypass the same-origin policy to provide a "Upload by URL" functionality?
Which solution do you think is best?
How hard is it to setup 2)? I have no experience in setting up proxies. FWIW, we host our application on Heroku.
I hope the situation I described is clear enough.
Thank you!
Yoran
Yes, you could force your clients to download the other-domain image to their local drives and then upload that copy from their local drives.
"Best" is subjective & relative to your configuration. The traditional workaround is your option#2--bounce the image off your server. Really all you're doing is having your server upload the image and re-serve it to the client. If you're expecting a huge volume of images, then forcing the client to download their own images might be better rather than gumming up your server by "cleaning" their images.
How hard to set up? It's fairly easy...after all you're just having some server code pull a remote image and save it to a specified server directory. The only modestly hard part is:
Make sure the server never interprets one of those client-inspired urls as executable (viruses!)
Clear the new directory often so the server is not over-weighted with images loaded for the client
Set limits on the size and quantity of images the client can upload to your server (denial-of-service attack!).
Context:
I setup a photo upload that uses an iframe to upload the image, then that has an optional jCrop step.
the client doesn't want to have to wait for the image to be uploaded. here's what the client said:
"You shouldn't have to wait for anything on the server end.
I don't care if the cropping happens on the server or client.
The interaction for cropping shouldn't wait on upload"
Is the client crazy, or is there some kind of way for me to have the image available for front-end manipulation instantly?
Edit:
TLDR: using a <input type="file"/>, if a user picks an image, can I immediately reference that local file somehow? would that show up as the input's value after change?
I can think of three technics to do a browser based image manipulation possible:
- java applet
- flash
- html5: file api (to read the image) and canvas (to show and manipulate it). But the browser support for the file api is not quite good as far as I know.
i'm creating a web application to generate images according to user's input, more precisely a barcode generator. i'm using javascript to process the data input by user. In the end, i want to have my output barcode as an jpg or png. What other tools do i need? I know that javascript cannot create the .jpg or .png file for me. What other tools can help me generate an image file?
Its possible using Canvas element in HTML5
http://blog.nihilogic.dk/2008/04/saving-canvas-data-to-image-file.html
I dont know i there any free script is out there but you can try this one:
http://www.java4less.com/barcodesjavascript/barcodesjavascript.php?info=intro
Hope its help,
Karls
I have created previews of user driveways after pavement using PHP GD with a picture submitted by the user.
It's done with PHP so you would POST the data to a PHP script on the server side and create the image from there.
I went as far as having the user click and make a path of the section to remove (the old driveway) and use that to cut out the driveway and replace it with a background layer.
You can set up PHP locally with Apache or IIS. PHP is pretty much standard on all hosting services.
You could build an image editor with it.
https://www.php.net/manual/en/book.image.php