Added uppy for file uploading #840

harshithpabbati · 2019-03-06T09:03:58Z

Fixes #212

Make sure these boxes are checked before your pull request (PR) is ready to be reviewed and merged. Thanks!

tests pass -- look for a green checkbox ✔️ a few minutes after opening your PR -- or run tests locally with npm test
code is in uniquely-named feature branch and has no merge conflicts
PR is descriptively titled
ask @publiclab/is-reviewers for help, in a comment below

We're happy to help you get this ready -- don't be afraid to ask for help, and don't be discouraged if your tests fail at first!

If tests do fail, click on the red X to learn why by reading the logs.

Please be sure you've reviewed our contribution guidelines at https://publiclab.org/contributing-to-public-lab-software

Thanks!

harshithpabbati · 2019-03-06T09:04:34Z

@jywarren @publiclab/is-reviewers done with it .

harshithpabbati · 2019-03-06T09:29:48Z

it was same as the old one i just sent a new pr with rebasing.

harshkhandeparkar · 2019-03-06T10:43:11Z

Harshith please don't open new PRs each time. It becomes really difficult to manage them. Thanks.

harshithpabbati · 2019-03-06T10:44:58Z

Ok fine!!

harshithpabbati · 2019-03-06T15:14:46Z

@jywarren it's done i was also done with the rebase.

jywarren · 2019-03-06T15:50:05Z

Oh, can you link to the previous PR so we can see what state things were at? Is this now ready for final review and can you attach a screenshot? Or could you try closing this and pushing the latest to the old PR so we stay in one thread?

Thank you @harshithpabbati !!!

harshithpabbati · 2019-03-06T15:53:00Z

This was the one and let's stay in this thread.

jywarren · 2019-03-06T16:02:20Z

Oh, is the Take a Photo button from within Uppy, or is it our own? I think Uppy has a feature like this that we could potentially use to replace our own?

…

On Wed, Mar 6, 2019 at 10:53 AM Harshith pabbati ***@***.***> wrote: [image: uppyup] <https://user-images.githubusercontent.com/43822585/53894336-edf27b00-4055-11e9-9c61-f6f0393efd40.png> This was the one and let's stay in this thread. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#840 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ2P8jOcdVoiWGySq_3y0HI2HTPkpks5vT-RcgaJpZM4bgYOZ> .

harshithpabbati · 2019-03-06T16:04:09Z

Oh, is the Take a Photo button from within Uppy, or is it our own? I think Uppy has a feature like this that we could potentially use to replace our own?

Yeah it has a option but i was not able to do that. So i didn't removed the previous one.

jywarren · 2019-03-06T16:06:53Z

ah, what happened that didn't work? On Wed, Mar 6, 2019 at 11:04 AM Harshith pabbati <notifications@github.com> wrote:

…

Oh, is the Take a Photo button from within Uppy, or is it our own? I think Uppy has a feature like this that we could potentially use to replace our own? … <#m_-7539136547728304416_> On Wed, Mar 6, 2019 at 10:53 AM Harshith pabbati ***@***.***> wrote: [image: uppyup] https://user-images.githubusercontent.com/43822585/53894336-edf27b00-4055-11e9-9c61-f6f0393efd40.png This was the one and let's stay in this thread. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#840 (comment) <#840 (comment)>>, or mute the thread https://github.com/notifications/unsubscribe-auth/AABfJ2P8jOcdVoiWGySq_3y0HI2HTPkpks5vT-RcgaJpZM4bgYOZ . Yeah it has a option but i was not able to do that. So i didn't removed the previous one. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#840 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ_-jx04fmnXn8fLqyf5-i026a1o0ks5vT-b6gaJpZM4bgYOZ> .

harshithpabbati · 2019-03-06T16:07:39Z

yeah i tried it many times but i was not able to make it out.

harshithpabbati · 2019-03-06T16:08:56Z

We can make it as a new issue to add the take photo button using uppy.

jywarren · 2019-03-06T16:11:56Z

Hmm, what line needed to be changed? Can you leave it in, but comment it out? And then we can continue to work on that here? I think it's best to try to do this as a single PR if possible, but if we get really stuck (even with help from others) we can move on and do it later. Thank you!

harshithpabbati · 2019-03-06T16:15:42Z

We need to add the new lines in the script to use the web cam.

uppy.use(Webcam, {
  onBeforeSnapshot: () => Promise.resolve(),
  countdown: false,
  modes: [
    'video-audio',
    'video-only',
    'audio-only',
    'picture'
  ],
  mirror: true,
  facingMode: 'user',
  locale: {}
})

Something similar to this. I couldn't make I tried it for many times.

jywarren · 2019-03-06T16:16:48Z

And what exactly went wrong, did you see an error?

examples/index.html

harshithpabbati · 2019-03-06T16:21:57Z

Yeah now i am done with the required changes.

harshithpabbati · 2019-03-06T16:32:41Z

@jywarren check it out.

harshithpabbati · 2019-03-07T12:23:53Z

@jywarren I tried it again today but i am unable to do it.
There was no output.

jywarren · 2019-03-08T17:16:33Z

No output like nothing shows in the webcam video, or nothing is sent to the next step? Can you detail what happens with a few screenshots to illustrate? Are there errors shown when you try, like perhaps a permissions error?

Also, are the other means of uploading working fine?

Could we add upload by link?

jywarren · 2019-03-08T17:16:56Z

No worries, we will figure this out! See if someone else from @publiclab/is-reviewers can also help debug a bit?

jywarren · 2019-03-08T17:17:43Z

Could be that webcam access from a local file is security restricted? Can you try running a local server with the http-server npm module maybe? https://www.npmjs.com/package/http-server

harshithpabbati · 2019-03-08T18:02:33Z

I will check through it.

harshithpabbati · 2019-03-08T18:03:13Z

No output like nothing shows in the webcam video, or nothing is sent to the next step? Can you detail what happens with a few screenshots to illustrate? Are there errors shown when you try, like perhaps a permissions error?

Also, are the other means of uploading working fine?

Could we add upload by link?

I was not getting anything.

harshithpabbati · 2019-03-09T15:52:06Z

Ha did it but have changes in it @harshkhandeparkar
https://harshithpabbati.github.io/image-sequencer/examples/
Checkout this!!!

harshkhandeparkar · 2019-03-09T16:08:24Z

Harshithz you have to force commit node_modules

harshithpabbati · 2019-03-09T16:08:59Z

Harshithz you have to force commit node_modules

yeah i did it.

harshithpabbati · 2019-03-09T16:09:52Z

but it was not working.

harshithpabbati · 2019-03-09T16:10:46Z

it's not taking the images as input.

harshkhandeparkar · 2019-03-09T16:11:52Z

Check if it is showing any errors in the browser

harshithpabbati · 2019-03-09T16:13:10Z

Check if it is showing any errors in the browser
No it's working but i can't get the image into the load image

harshkhandeparkar · 2019-03-09T16:14:10Z

Is it showing any errors in the browser console?

harshithpabbati · 2019-03-09T16:15:47Z

Yeah failing to load css files.

harshkhandeparkar · 2019-03-09T16:16:19Z

Screenshot?

harshkhandeparkar · 2019-03-09T16:17:31Z

You can comment or delete the part in index.html which links to the manifest.json file.

harshithpabbati · 2019-03-09T16:17:34Z

harshithpabbati · 2019-03-09T16:18:27Z

In localhost it is fine.

harshkhandeparkar · 2019-03-09T16:18:56Z

Oh ok wait

harshkhandeparkar · 2019-03-09T16:20:24Z

I checked out your branch, there is no node_modules

harshithpabbati · 2019-03-09T16:21:16Z

oh ok fine but the problem is with getting the image in the load image....

harshkhandeparkar · 2019-03-09T16:23:47Z

It is not happening since jquery is not working as it is not available

…

On Sat 9 Mar, 2019, 9:51 PM Harshith pabbati, ***@***.***> wrote: oh ok fine but the problem is with getting the image in the load image.... — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#840 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AhKOn_OkGA3tha4sNABX9V-KPdeoakEVks5vU999gaJpZM4bgYOZ> .

harshithpabbati · 2019-03-09T16:24:35Z

It is not happening since jquery is not working as it is not available
…
On Sat 9 Mar, 2019, 9:51 PM Harshith pabbati, @.***> wrote: oh ok fine but the problem is with getting the image in the load image.... — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#840 (comment)>, or mute the thread https://github.com/notifications/unsubscribe-auth/AhKOn_OkGA3tha4sNABX9V-KPdeoakEVks5vU999gaJpZM4bgYOZ .

even it's not happening in localhost

harshkhandeparkar · 2019-03-09T16:26:22Z

If it is not happening on localhost, see if there are any errors in the console, again.

harshithpabbati · 2019-03-09T16:27:50Z

see this.

harshkhandeparkar · 2019-03-09T16:39:05Z

CORS problem 😭 please search for it on Google. I am busy I cannot help you right now sorry.

harshkhandeparkar · 2019-03-10T13:07:45Z

Harshith, you will have to add an option to override the methods in this file https://github.com/publiclab/image-sequencer/blob/main/src/ui/SetInputStep.js. Instead of default methods for dropzone and fileInput, you will have to create an option to upload the file directly to sequencer, instead of sequencer handling the file upload.

jywarren · 2019-03-11T21:23:48Z

Just a few notes -- i think CORS might stop being an issue if you use http-server to run your app locally. did you try this?

I like your solution of a popup. But perhaps it should say "Drag in an image or click here to upload" -- but then, Uppy wouldn't be running in the drag/drop zone itself. So, i think @harshkhandeparkar is right that you may have to refactor your work into SetInputStep. Does that make sense?

jywarren · 2019-03-11T21:27:32Z

OH, wait - your CORS errors are on trying to upload using tus but i think you can just leave that out, as we don't need to upload -- just pass locally over to the Sequencer! See how SetInputStep accepts an options.onLoad method which it runs and passes in the image to:

image-sequencer/src/ui/SetInputStep.js

Lines 10 to 26 in 0865bc4

    
           var onLoad = options.onLoad; 
        
           var onTakePhoto = options.onTakePhoto; 
        
           var reader = new FileReader(); 
        
           function handleFile(e) { 
        
             e.preventDefault(); 
        
             e.stopPropagation(); // stops the browser from redirecting. 
        
             if (e.target && e.target.files) var file = e.target.files[0]; 
        
             else var file = e.dataTransfer.files[0]; 
        
             if(!file) return; 
        
             var reader = new FileReader(); 
        
             reader.onload = onLoad;

harshithpabbati · 2019-03-25T22:08:21Z

@jywarren I will resume my work I forgot about it.

harshkhandeparkar · 2019-10-26T11:25:23Z

This is not working. We'll have to find a new solution. Since we are already developing a new UI, we will do it there. @harshithpabbati

Added uppy for file uploading

533a242

harshithpabbati closed this Mar 6, 2019

harshithpabbati reopened this Mar 6, 2019

harshithpabbati requested a review from jywarren March 6, 2019 09:07

jywarren reviewed Mar 6, 2019

View reviewed changes

examples/index.html Outdated Show resolved Hide resolved

jywarren reviewed Mar 6, 2019

View reviewed changes

examples/index.html Outdated Show resolved Hide resolved

Done with the required changes

c5b1af9

Merge branch 'main' into uppyup

b2f3f22

This was referenced Apr 19, 2019

Colorimetry tool for node context publiclab/colorimetry#1

Merged

UI to guide taking good images publiclab/colorimetry#3

Closed

harshkhandeparkar closed this Oct 26, 2019

Added uppy for file uploading #840

Added uppy for file uploading #840

Conversation

harshithpabbati commented Mar 6, 2019

harshithpabbati commented Mar 6, 2019

harshithpabbati commented Mar 6, 2019

harshkhandeparkar commented Mar 6, 2019

harshithpabbati commented Mar 6, 2019

harshithpabbati commented Mar 6, 2019 • edited Loading

jywarren commented Mar 6, 2019

harshithpabbati commented Mar 6, 2019

jywarren commented Mar 6, 2019 via email

harshithpabbati commented Mar 6, 2019 • edited by jywarren Loading

jywarren commented Mar 6, 2019 via email

harshithpabbati commented Mar 6, 2019 • edited by jywarren Loading

harshithpabbati commented Mar 6, 2019

jywarren commented Mar 6, 2019

harshithpabbati commented Mar 6, 2019

jywarren commented Mar 6, 2019

harshithpabbati commented Mar 6, 2019

harshithpabbati commented Mar 6, 2019

harshithpabbati commented Mar 7, 2019

jywarren commented Mar 8, 2019

jywarren commented Mar 8, 2019

jywarren commented Mar 8, 2019

harshithpabbati commented Mar 8, 2019

harshithpabbati commented Mar 8, 2019 • edited by jywarren Loading

harshithpabbati commented Mar 9, 2019

harshkhandeparkar commented Mar 9, 2019

harshithpabbati commented Mar 9, 2019

harshithpabbati commented Mar 9, 2019

harshithpabbati commented Mar 9, 2019

harshkhandeparkar commented Mar 9, 2019

harshithpabbati commented Mar 9, 2019

harshkhandeparkar commented Mar 9, 2019

harshithpabbati commented Mar 9, 2019 • edited Loading

harshkhandeparkar commented Mar 9, 2019

harshkhandeparkar commented Mar 9, 2019

harshithpabbati commented Mar 9, 2019

harshithpabbati commented Mar 9, 2019

harshkhandeparkar commented Mar 9, 2019

harshkhandeparkar commented Mar 9, 2019

harshithpabbati commented Mar 9, 2019

harshkhandeparkar commented Mar 9, 2019 via email

harshithpabbati commented Mar 9, 2019

harshkhandeparkar commented Mar 9, 2019

harshithpabbati commented Mar 9, 2019

harshkhandeparkar commented Mar 9, 2019

harshkhandeparkar commented Mar 10, 2019

jywarren commented Mar 11, 2019

jywarren commented Mar 11, 2019

harshithpabbati commented Mar 25, 2019

harshkhandeparkar commented Oct 26, 2019

harshithpabbati commented Mar 6, 2019 •

edited

Loading

harshithpabbati commented Mar 6, 2019 •

edited by jywarren

Loading

harshithpabbati commented Mar 6, 2019 •

edited by jywarren

Loading

harshithpabbati commented Mar 8, 2019 •

edited by jywarren

Loading

harshithpabbati commented Mar 9, 2019 •

edited

Loading