search

FineUploader / fine-uploader

Multiple file upload plugin with image previews, drag and drop, progress bars. S3 and Azure support, image scaling, form support, chunking, resume, pause, and tons of other features.
https://fineuploader.com
MIT License
8.18k stars 1.87k forks source link

Fine-uploader for designers #1640

Closed chriswestw closed 8 years ago

chriswestw commented 8 years ago

Documentation request Uploader type: ALL Getting started for designers

We have been through 01-03 Getting Started. Its clearly a fabulous guide for developers. However as designers we would welcome a step by step guide to get to a working example that facilitates file Uploads and Posting on the designers domain.

Like all things in life a working example is far easier to adapt and configure - but right now getting to a working Fine Uploader example is hard to do it seems- unless one has a decent understanding of JS constructs.

So the requirement is actually nothing more than a more detailed hand-hold to get as far as a working example- scope as above

rnicholus commented 8 years ago

Can you edit your description to include a detailed question?

chriswestw commented 8 years ago

I did edit the issue description as requested Ray.

rnicholus commented 8 years ago

However as designers we would welcome a step by step guide

Since I'm not a designer, I'm not quite sure how to comply. Can you outline the exact elements of the guide that were confusing?

chriswestw commented 8 years ago

ok Ray I will put the Get Started data on some Designer focused community websites and ask them to give their opinions and suggestions.

For info..I have already sent the get started guide to a handful of co-designers (asking for their help before I posted on stackoverflow). Some understand how to develop css/html and content pages. And a handful are into mysql databases and a little php. Pretty much the same response....fabulous looking demos and specification ....but how do you get it working without an understanding of JS

On Sun, Aug 14, 2016 at 4:05 AM, Ray Nicholus notifications@github.com wrote:

However as designers we would welcome a step by step guide

Since I'm not a designer, I'm not quite sure how to comply. Can you outline the exact elements of the guide that were confusing?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/FineUploader/fine-uploader/issues/1640#issuecomment-239653298, or mute the thread https://github.com/notifications/unsubscribe-auth/AM8naFIuLsHFQCsLi5UdK6BG_X-wWJb8ks5qfoYAgaJpZM4Jjkjb .

rnicholus commented 8 years ago

how do you get it working without an understanding of JS

Yes, how indeed. The library was developed with the assumption that integrators have an understanding of HTTP, JavaScript, and at least one server-side language. In the absence of one (or all) of these traits, getting Fine Uploader up and running may be difficult. Well, getting it up and running is doable, but scaling and customizing it may be tough, but this is not a problem unique to Fine Uploader. If there is a sizable audience of designers who would like to get Fine Uploader up and running, then I'd like to hear from them and see if we can either tailor the documentation to suit their skill level, or perhaps create an alternate "getting started guide" for designer-types.

chriswestw commented 8 years ago

Is not so hard I don't think. We do use blueimp. Its easy to take the demo versions which work first time out of the box. Then if you know where to look its pretty easy to change multiple parameters - all in one php file. And some js/php developers have done a great job of creating xml / json parameter driven configs to facilitate this (eg PHPFormbuilder). So what all that means is guys like us can (and do) use it a lot. That said your Fine loader spec and demos seem to suggest its a much more flexible product. And the easiest of all to use. All that's really needed here is a bit of hand-hold documentation and (possibly) an out of the box starting point (which may actually exist now but we dont know) - load the page and it runs. So that really is all there is too this request. Designers are all pretty good at html, usually a bit of JS but nearly never any HTTP. Personally I think there is a big gap out there for a configurable dead easy to use uploader...that just runs. Id be happy to work with you on that as your "test dummy". But I would equally understand if our types isn't really where you are targeting this product.

rnicholus commented 8 years ago

Have you seen the full stack JS uploader article and matching GitHub repo I created a while back? This is literally plug-and-play, though it is centered around Angular. Is this what you're looking for, but library/framework agnostic?

chriswestw commented 8 years ago

I will look at this link properly in the next couple of hours Ray.

Before I do let me give you a very first impression of the clicks on the links that you just sent over. Please take these as comment from a guy that truly respects the genius that has gone into your plug ins and just wants to benefit from that genius. Here goes....

a) first your link says go to 'GitHub repo'. Look at the 'stack JS Uploader'. Trust me I am scared of the terminology already (I am not really-but you get my point). Most designers wouldn't click on a link like that. They actually would be too scared. You could have said instead..."here is a link to get you going. it will enable you too....upload mages, manipulate images, easily post images to your database etc" Most designers don't even know what angular js etc is. Heard of it yes..but certainly don't want to risk learning it.

b) The GitHub repo...is the home of geniuses. Its not home to us creative types. If you are a budding google employee - great. If you just want something really nice to use as an uploader (upload-post-configure) you wont be looking on GitHub repo. its an alien world to our types.

c) The terms used on the link pages and the underlying method for getting started.....could be written with people like us in mind. It will say what you say now, But in a language that doesnt scare us off. Its just a version that actually says the same stuff but in a manner that is procedural and simple to grasp for our kinda types. Simple procedural instructions with links as required. I am an engineer by grad - so have spent an awful lot of time building bridges between experts designers and 'not-so-expert users and adopters

d) Just a further point on c) ,,, our types tend to source out of the box scripts and fiddle with them!! Codecanyon and its like tends to be where we go rather than GitHub which terrifies us.

I will take a good look at your angular stack js uploader .... and see if I can figure it out Ray.

Thanks

rnicholus commented 8 years ago

This is really useful feedback. I'm going to think this over a bit and outline some ideas next.

chriswestw commented 8 years ago

ok thanks Ray. I am trying to be a friendly fool here. No intentions of annoying you. Obviously if we are not your market just say so. But I honestly believe you have an opportunity to make something special here.

I did try to get into the link you sent over. It opened up with...."This example assumes you are already comfortable with AngularJS, node.js, HTML, JavaScript, and CSS". That really is a big ask for our types. We are too busy deciding on what images to use, how to configure the database schema or writing a forms management procedure for users etc,...But I am convinced you have the tools here to make your uploader universal, used and talked about - its just the presentation

If you are able to get us past our inadequacies we would be happy people!

rnicholus commented 8 years ago

The market for Fine Uploader is anyone who wants to utilize all of the unique and helpful features of the library in their web application. Though most of my writing and development comes from the perspective of, no surprise here, an experienced developer. But now I have a designer's perspective, so I'd like to make good use of this gift.

Fine Uploader for designers

Not a developer?

Don't want to mess with npm, GitHub, or even the terminal?

Want to try out Fine Uploader and its unique and comprehensive set of features?

Get Fine Uploader up and running on your computer in three easy steps:

  1. Download fine-uploader-for-designers-5.11.4.zip
  2. Unzip the file by double-clicking it.
  3. Open the folder, and double-click on start.bat (Windows) or start.sh (Mac OS).

After executing the above steps, your browser will automatically open to a page with a fully-functional and modern looking Fine Uploader instance with all features enabled (including a drop zone) and a running server. Simply hand-edit any of the CSS, HTML, or JavaScript files in the "custom" directory if you wish to customize your uploader.

Need more help? Contact @FineUploader on Twitter.

I see the above page living at http://fineuploader.com/designers, with a reference to the page prominently displayed on http://fineuploader.com/. How does this sound @chriswestw? Any changes or additions you'd like to see?

chriswestw commented 8 years ago

Ray - this is brilliant if you can really do it!

If you want I will work with you to implement and test your procedure. And as we go I will add requests for help which you (with my input if you want it) could turn into designer-friendly extensions of the procedure. For example you would be amazed at how difficult our types find it doing really simple things (for you) like finding out how to upload the file.names and post them to databases. Its not because its hard...but because its explained in language that is just alien to us. Imaging the benefits to us of being able to follow dead simple instructions to take advantage of S3 etc. Imagine being able to download a gallery of uploaded images onto a page (say) using json (but not even knowing we were using json). Imagine being able to resize images on load- following a few simple instructions. All this is so so hard right now. I have looked at Uploadify, Blueimp, DropZone and others. They all claim to be easy. And sure - they are to developers. But to us lot the language is so hard to understand. But it really doesn't need to be that way.

One other thing I would suggest. You could market this new (for designers) solution via Codecanyon etc the same way as things like PHPFormbuilder that I mentioned earlier. They will typically take 50% but there is a big designer community out there. Offer them a free trial. That will lower the barriers to it being tried. Make its a doddle to get up and running. Be the first to genuinely transform the world of uploads. I will assist you with suggestions about how to get the message over if you wish - it really is needed by your market in my opinion.

Just for your info I am on a boat (on the sea) for a couple of weeks (from tomorrow morning) but will log into my emails whilst onshore and provide you with input - if you want it. [Email on a boat is another one of those problems to be solved - at an affordable cost].

rnicholus commented 8 years ago

if you can really do it!

I can!

If you want I will work with you to implement and test your procedure.

Yes, your perspective will be helpful. I'll need you to verify that the final solution is accessible. Also, I'd love it if you could design the http://fineuploader.com/designers page to make it appealing for designers. If you're able to do that, we can talk further about how you can contribute.

finding out how to upload the file.names and post them to databases

File names are available in the request sent by Fine Uploader. I plan on using a PHP server as the backend that will store files on the hard disk. Each file will reside in a folder named for the unique ID assigned by Fine Uploader. The file in this folder will include the actual name of the file.

follow dead simple instructions to take advantage of S3

I'm afraid there is really no way to make this dead simple. Getting Fine Uploader S3 up and running really does require good knowledge of S3. My target for Fine Uploader For Designers is Fine Uploader UI for "traditional" endpoints (i.e. not S3/Azure).

resize images on load

Do you mean scale an image before it is uploaded? This is something Fine Uploader provides, and all that is required is inclusion of an option. I can include some boilerplate in the turnkey JS with comments to guide designers who want to customize it further.

You could market this new (for designers) solution via Codecanyon

I have no desire or intent to profit off of Fine Uploader. I'd like to keep it free for all.

I've create a GitHub repository to house the Fine Uploader For Designers "wrapper" that I have described above. Nothing much has been done yet, but check back for updates at https://github.com/FineUploader/fine-uploader-for-designers.

chriswestw commented 8 years ago

OK- I will keep an eye on the progress whilst I am away. And will happily assist with the test and feedback when I get back. The functions I mentioned in my prior post were just off-the-cuff examples of areas where we struggle. There are a others. But from my experience nearly any complex problem can be turned into a series of simple steps (wizards)-that pretty much anyone can follow. But I do appreciate it can be a thankless (even monotonous) task especially for the genius types---to write those procedures etc. Good luck Ray. I'm excited to see the outcome.

chriswestw commented 8 years ago

ps An extremely easy to use and customize full-stack version of Fine Uploader, aimed at non-developers.....

sugestion: ''full stack'' wont mean much to a lot of designers. I know its common language amongst developers. But putting a designer hat on - it adds to the trepidation. Maybe intro like...

Logo strap line: the world easiest to use Image and File Uploader solution sub strap: ....designed for designers ... No programming needed. Just simple to follow steps. ..........................then a small handful of bullet points extolling virtues and benefits ............................... call to action: -------3 min youtube->download ->and click GO to GO

pps Codecanyon suggestion wasn't meant to suggest a profit making opportunity. You will find a lot of our types lurking there hoping for something nice and easy to use... and not expensive.

strohhut commented 8 years ago

What I find a bit confusing about the "Getting Started" guide is:

Step 1 says to download the bundled files. Step 2 is already instantiating the FineUploader JS object.

How about explaining what (and how) needs to be referenced before using it? I know that this is explained elsewhere but a consistent "Getting Started" guide that takes you from the beginning to a working default would be nice.

rnicholus commented 8 years ago

Can you explain what specific steps/information is missing? A pull request with the changes would be best.

strohhut commented 8 years ago

I'm just a beginner at fine-uploader so I don't think I can write real documentation. But it be great if the current step 2 would become step 4. For step 2 I'd make a light version of "Decide which Fine Uploader to use" without any code samples yet. Just explain the differences in functionality. For step 3 I would use the "Importing Fine Uploader" section. I'd adjust the "Globally Scoped" section though. I would remove the new qq.FineUploader code and instead mention here that templates have to be included for the UI mode. So step 3 should mention everything that should be referenced for the different modes (core/UI/Azure/S3) and how to do it (and not leave out something like the html templates). Then for step 4 I'd finally show the instantiations of the different modes and the options with JS samples.

Another thing is that the downloaded fine-uploader bundle doesn't have a client folder but the templates are using it

<link href="client/fineuploader-gallery.css" rel="stylesheet">
<script src="client/fine-uploader.js"></script>

I know that installing fine-uploader via bower gives you a Client folder but the readme there says to use the bundle. Also via bower I don't get the fine-uploader.js. It's only in the bundle. I don't think people are really putting all fine-uploader files in a top-level folder called client. The usual path would be something like /lib/fine-uploader/dist/ but I guess that becomes off-topic now.

rnicholus commented 8 years ago

Thanks for the details. Those seem like reasonable adjustments. I'll take a closer look at the guide and make some changes, possibly tonight.

strohhut commented 8 years ago

Nice. Another thing I just noticed is that the documentation for "API" -> "Options" doesn't have an entry for the callbacks option and the "API" -> "Events" documentation doesn't mention that 'the callbacks object belongs to the callbacks property of the option object.

rnicholus commented 8 years ago

I will clarify that as well, thanks.

rnicholus commented 8 years ago

@strohhut I just created #1646 to track updates to the getting started guide. We can discuss further details their, if needed, and you can follow my progress.

rnicholus commented 8 years ago

I'm going to close this as work is scheduled and in progress at https://github.com/FineUploader/fine-uploader-for-designers. Comments and suggestions can be made in that project's issue tracker.

chriswestw commented 8 years ago

Hi Ray I hope you are well. How is Fine Loaded for Designers progressing? Regards Chris

Sent from my iPhone

On 17 Aug 2016, at 07:44, Ray Nicholus notifications@github.com wrote:

Closed #1640.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

rnicholus commented 8 years ago

You can follow progress at https://github.com/FineUploader/fine-uploader-for-designers/issues. For the next week or so (possibly even longer) I'll be completely tied up preparing my book for publishing. I'll get back to Fine Uploader for Designers and other elective Fine Uploader duties once things have calmed down.

chriswestw commented 8 years ago

OK will keep an eye on progress. I have informed a few other guys in the design community about what you are doing as well Ray. The industry needs this

On Sun, Aug 28, 2016 at 5:28 AM, Ray Nicholus notifications@github.com wrote:

You can follow progress at https://github.com/FineUploader/fine-uploader- for-designers. For the next week or so (possibly even longer) I'll be completely tied up preparing my book https://amzn.com/1484222342 for publishing. I'll get back to this and other non-mandatory Fine Uploader duties once things have calmed down.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/FineUploader/fine-uploader/issues/1640#issuecomment-242955621, or mute the thread https://github.com/notifications/unsubscribe-auth/AM8naCTfeE5ZtaoAVxhh7hhP0IvfYKoBks5qkQ5ggaJpZM4Jjkjb .

rnicholus commented 8 years ago

Thanks @chriswestw. Slow going right now due to other commitments. I'm looking for other serious developers, designers, and PMs to join me on this and other Fine Uploader projects. If you know of anyone who is capable and interested, please let them and/or me know.