obscuring / securing filepicker / filestack urls - filepicker.io

I use filepicker to serve resized / cropped / watermarked images on a website. I use the regular URL based API to do this: e.g. a url might look like https://.../convert?h=400&w=600&fit=crop&quality=80&format=jpg&cache=true
This obviously allows a lot of flexibility for sizing images on the fly and so on. However, it also means that anyone can get the original un-cropped, un-watermarked image by removing the parameters at the end of the URL.
Is there any way around this short of creating a proxy server that could un-encode an encoded string?
For the latest version, it seems you need to add in your API key to the URL as well - what would stop someone else from using my API key? Are these URLs really meant to be used on a production website in the <img> tags? or for creating a resized image to download, store and ultimately serve up to the end user?

We have updated our processing engine so that it is no longer necessary to pass an API key if you are transforming an image based on its Filestack Handle:
https://process.filestackapi.com/watermark=file:ZoVdwbe6Qcu9uIxIZSuU/h2T4Jl9RBSSXOGtl0gv8
However, a user could still get the image without the watermark. So, we also have a store method built into the processing engine:
Posting the image with our store task attached:
curl -X POST -g "https://process.filestackapi.com/store/watermark=file:ZoVdwbe6Qcu9uIxIZSuU/h2T4Jl9RBSSXOGtl0gv8"
Will return the following:
{"filename":"photo-1435771112039-1e5b2bcad966.jpg","height":750,"size":67588,"type":"image/jpeg","url":"https://cdn.filestackcontent.com/62aWdbPvQzWNrl90C7q9","width":1000}
Which is a saved version of the watermarked image, so the watermark cannot be removed:
https://cdn.filestackcontent.com/62aWdbPvQzWNrl90C7q9

We recommend using the newer method but you should also set up security so that people can't hotlinking to your content.
https://www.filepicker.com/docs/security/
I would also recommend move over to Filestack as it we have rebuilt all the infrastructure.

Related

filepicker.io mass convert image

Is there a way to mass convert an image? We're experimenting with replacing imagemagick and taking the load off of our servers -- I've got a version working that just loops through the sizes and calls convert on the original image, making 23 copies of differing styles (sizes and crops). However, if the user leaves the page before all the conversions are done, the script stops and I end up missing a bunch of image styles.
Is there a good way to get around this with Filepicker.io? I'd really like to be able to just pass a list of options to the convert method and have it complete in the background.
Thanks in advance,
- Jeff
The best way to do this is either using the /convert endpoint to do on-the-fly conversion (https://developers.filepicker.io/docs/web/#fpurl-images) or to do a POST to our rest endpoint to create the converted images and store them in S3 via a server-side call

filepicker the front end cropper

To make it even easier to work with user content, we enable image post-processing. This way, regardless of what type of file a user uploads from the Cloud or their local device, you can be sure it's in exactly the right size. To convert an image, take the filepicker url and append /convert, along with query parameters specifying what you want to change. See the DocsĀ»
filepicker.io shows an example of a cropping tool on their front page. Could that be built into the picker itself?
We've discussed building it into the upload experience a la iOS, but think that the functionality is best done as a step after the upload. The demo on our front page is done using JCrop, and at some point we'll open-source the demo as a jquery plugin or similar.

What's the best way to download multiple images and display multiple UIImageView?

I need to download images from a website and display them on(?) multiple UIImageView.
Maybe I'll code a php to "read" the directory and search for images, write a XML file and use it as medium. But I'm not sure if it's the best way.
Let's see the options you have to fetch images from a website:
Fetching HTML and Parsing the HTML to find the images (on the iphone). Then downloading the images.
Writing a script (maybe PHP) that writes all image links to an XML file (or JSON), and then fetch the output of your script with all the links.
If you choose option (1) you'll need NSURLConnection to fetch data asynchronously (without blocking the UI). I would also use TFHpple to parse HTML using xpath queries, see this tutorial for help. Finally to fetch the images using their URLs you can use SDWebImage, SDWebimage also provides caching so your app will not download the same image multiple times.
The bad side of using option (1) is that any change in the Website you're getting the images from will break your app and you'll need to issue an update to the app store in order to fix it.
If you choose option (2), your app will be easier to fix if the website changes, you'll just need to modify your script.
If you go with option (2) you'll probably need NSURLConnection, NSXMLParser (or a third party XML parsing library) and to download the images I would recomend SDWebImage again. I would also advise using JSON (and NSJSONSerialization) instead of XML, just beacuse I find JSON easier to parse.
Yes, it will be very good if you write some php script to get image list (list of image urls).
After getting such urls you can asynchronously download and show them in image views. Look here for such async image view implementation

Filepicker.io - image conversions preventing video uploads

We're currently working with Filepicker.io to allow users the ability to upload both images and videos. It appears that if we specify image conversions in the Javascript API options, video uploads don't process and instead get stuck at 99.30%. If I remove the 'conversions' option, video uploads process without issue. Is it not possible to specify image conversion options and accept both type of uploads? If so, this should really be specified in the docs.
I attached a JSFiddle with the code in question. http://jsfiddle.net/BYkD4/
It might be an issue on our end, taking a look now. For large files (+1Mb) we split the file into chunks, upload them in parallel, and then reassemble them on the server side. We use browser progress up to the 90% mark, after which we have to "best guess" what the server-side progress looks like, for now at least. That's the reason why it's hanging at 99.30% - it may actually be able to complete if you give it enough time.
In any case, looking into it
Edit: looks like this was an issue on our end. Fix deployed, everything should be working fine. Sorry about the issue

Getting images by parsing constantly changing HTML

I'm in the process of developing an iOS app that retrieves images from a URL (http://m.9gag.com). It so happens that the HTML for the URL is in constant change and whenever I have a working code, the site's style changes.
Is there any way I could pull those images from the HTML without having to worry about webpage changes? There is no public API at the moment so that's sadly not an option.
I look forward to hearing some options.
Also, if the page is set so that when the user scrolls to the bottom, it loads more content, how can I get more html to load based on how far down in the HTML parsing I've got? I'm not using a webview, I just need to update the HTML I initially retrieved.
It seems that the simplest way in your case - use regular expression (for example http://[A-Za-z0-9_/\.]*\.jpg) to extract URLs and keep track of already pulled images.