Image drag/drop isn't working with latest beta? 1.3.0-beta.20

[kentcdodds]

The specific script: #310

Doesn't seem to work in the terminal either (is it supposed to?):

~ 💥
$ cloudinary-upload 
✔ Select directory in kentcdodds.com/misc · .
✔ Drop the image(s) you want to upload · /Users/kentcdodds/Desktop/alex.png 
The "path" argument must be of type string. Received undefined
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
    at new NodeError (node:internal/errors:329:5)
    at validateString (node:internal/validators:129:11)
    at Object.parse (node:path:1327:5)
    at file:///Users/kentcdodds/.kenv/scripts/cloudinary-upload.js?uuid=e399e2c3-5f97-40a1-84ef-34e0c5f59de7:100:28
    at processTicksAndRejections (node:internal/process/task_queues:94:5)
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
    at new NodeError (node:internal/errors:329:5)
    at validateString (node:internal/validators:129:11)
    at Object.parse (node:path:1327:5)
    at file:///Users/kentcdodds/.kenv/scripts/cloudinary-upload.js?uuid=e399e2c3-5f97-40a1-84ef-34e0c5f59de7:100:28
    at processTicksAndRejections (node:internal/process/task_queues:94:5) {
  code: 'ERR_INVALID_ARG_TYPE'
}

It's been a few weeks since I tried this so I'm not sure when it broke.

[johnlindquist]

Please try replacing:

const images = await arg({
  placeholder: 'Drop the image(s) you want to upload',
  drop: true,
  ignoreBlur: true,
})

with:

const images = await drop('Drop the image(s) you want to upload')

Why

drop:true was removed from the arg options since more UI options are being added. drop is really just a helper that wraps arg. If you want to use the arg version for whatever reason, it would be:

const images = await arg({
  placeholder: 'Drop the image(s) you want to upload',
  ignoreBlur: true,
  ui: 'drop',
})

The other ui helpers:

• await hotkey()
• await textarea()
• await editor()

all wrap arg in a similar fashion.

[JamesHenry]

@johnlindquist For me on beta.20 the above two commands are not equivalent, as the drop() variant does not seem to apply the placeholder.

Concretely, in my case:

const dropData = await arg({
  placeholder: 'Drop all account statement.csv file(s)',
  ignoreBlur: true,
  ui: 'drop',
});

...correctly renders:

Whereas:

const dropData = await drop('Drop all account statement.csv file(s)');

...incorrectly (based on my interpretation of your comment) renders:

P.S. You will see in both cases that the bottom border is missing. It doesn't look like it would be intentional, is that visual issue on your radar?

[johnlindquist]

@JamesHenry Thanks! I'll get those issues sorted.

[JamesHenry]

@johnlindquist I've been keeping an eye out for a release entry on Discussions, but see we're actually on .23 already.

I can confirm that the placeholder text is now being respected and showing correctly so that's great, however the visual aspect is now arguably worse than before. The bottom border still does not render, and the drop area has additionally got considerably smaller.

(I didn't change anything to do with any of the scripts)

If you would like me to open a separate issue or discussion to track this please let me know

[johnlindquist]

Here is fine. I wasn't testing with the //Menu metadata and was simply hard-coding the height. Obviously that won't work. 😅

[JamesHenry]

Things looking good in .29, thanks @johnlindquist!