Element-web: Support Drag & Drop of images from other browser windows into RoomView

Created on 21 Jan 2017  Â·  26Comments  Â·  Source: vector-im/element-web

It would be nice if you can drag an Image from a website and drop it into the chat view and have it uploaded.

I do not know if this is possible, but it would make the channel with my wife sooo mich nicer, because I could upload the images/gifs directly via d'n'd and would not need to safe them localy.

bounty bounty? feature p2 file-upload roomview

All 26 comments

This should be doable - Google Image Search already supports it. It's probably a very easy modification to the DND code to accept images from browsers as well as boring old files.

Current balance: 0.0 ETH
Tokens: SNT: 6000.00
Contract address: 0x936dfd4edefa099b88eb8e6c94a18df7d00bb95b
QR Code
Network: Mainnet
To claim this bounty sign up at https://openbounty.status.im and make sure to update your Ethereum address in My Payment Details so that the bounty is correctly allocated.
To fund it, send ETH or ERC20/ERC223 tokens to the contract address.

I started to have a look at this but hit a roadblock.
On drag and drop of an image, the only thing that is available is the URL for that image. My initial plan of action was to fetch this or pull the data from a canvas and construct a File object to pass through however this is not possible. Due to cors, an image cannot be loaded cross origin.

I had a look at how google does this. They forward the url of the image to their server to be uploaded. Does riot have such an upload endpoint as well?

We don't have such an endpoint today.

This _could_ be implemented by adding a method to the media repository to support ingesting a piece of content from a provided URL rather than the request body.

We would need to think very carefully about what we were doing to make sure nobody could do anything nasty (e.g. have us DOS services on their behalf, or gain privilidged access to our systems by initiating HTTP requests from within our network). That said, we've already considered these issues for our implementation of the URL preview feature, so it shouldn't be too hard to apply to this feature, too.

@lampholder Ok that makes sense. So where/what actually is the media repository and how can I make changes to it? Some guidance would be helpful. I could probably get this issue and #1953 done together.

@monokh @lampholder
can this https://github.com/react-dropzone/react-dropzone be (directly) applicable ?

@GlulkAlex it has already implemented in matrix-react-sdk. it's possible to upload files by dragging to RoomView.

Thanks, @oivoodoo .
It is a bit confusing that issues #3015 and #1953 are still open .
My bad, I must have done proper subject research beforehand .

@GlulkAlex The issue is that files are possible but dragging and dropping images from a web page is not. react-dropzone only works for files.

This would be really cool! Also, if we could have Drag & Drop for URLs too (that aren't images) being pasted into chat?

I tried to fix this issue, and found most required works seems have been done by oivoodoo (#2751, #1689) and he is targeting this issue, if this is the case, I will not continue to work on this, is my understanding right?

@gotmyname2018 yeah. I am working on it in free time, a bit stuck in synapse part, but it's really close to be published :)

@oivoodoo is this still being worked on?

Still interested in this!

@BloodyIron I'm not sure how much progress has been made but I'm more than happy to give it a shot.

Hi

if you have enough time it would be better to give a try to work on the
feature.

Thank you!

On 12 May 2018 at 00:36, Georgie Mathews notifications@github.com wrote:

@BloodyIron https://github.com/BloodyIron I'm not sure how much
progress has been made but I'm more than happy to give it a shot.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/vector-im/riot-web/issues/3015#issuecomment-388492027,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AADUxUjXkJigTyMyNMX7CD1K6DtHUaUUks5txgRvgaJpZM4LqLKQ
.

--
Best Regards,
Alexandr

skype: oivoodoo

Implemented! You can check the status here: https://github.com/matrix-org/matrix-react-sdk/pull/1893

@georgiemathews awesome! :D

@BloodyIron , you're better of tracking the progress already made here: https://github.com/matrix-org/matrix-react-sdk/pull/1689 by @oivoodoo

Any word on this? D:

the pull request was closed as I remember because of requirements to have
API changes that is still in proposal state.

On Tue, 17 Sep 2019 at 01:10, BloodyIron notifications@github.com wrote:

Any word on this? D:

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/vector-im/riot-web/issues/3015?email_source=notifications&email_token=AAANJRL3QYN7MZWBO3DLMRDQKAG47A5CNFSM4C5IWKIKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD62Y7BQ#issuecomment-531992454,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAANJRLY2DHRVKDLQIPYFEDQKAG47ANCNFSM4C5IWKIA
.

--
Best Regards,
Alexandr

skype: oivoodoo

Current balance: 0.0 ETH
Tokens: SNT: 6000.00
Contract address: 0x936dfd4edefa099b88eb8e6c94a18df7d00bb95b
QR Code
Network: Mainnet
To claim this bounty sign up at https://openbounty.status.im and make sure to update your Ethereum address in My Payment Details so that the bounty is correctly allocated.
To fund it, send ETH or ERC20/ERC223 tokens to the contract address.

openbounty.status.im seems dead, I hope nobody sent any ETH there? This was archived: https://github.com/status-im/open-bounty

Any chance we can get this feature going?

I would love to help, need to review the recent changes on the backend, in
case if it's possible to implement I will finish it. Going to review it
today.

Was this page helpful?
0 / 5 - 0 ratings