How do I make the form understand when I want to upload an image from a computer and when from a remote URL?

Question

Images

Good day,

Description of the task: there is a form in which a field for uploading files is inserted. When viewed in a browser, the form takes the form of a text field with a Browse button on board. This is the standard set. The task itself is that I want to use this text field both for loading pictures from a computer and from a URL. Those. if I want to load an image from a URL, then I'll just write the full path of the image in the same field.

How can I make the form understand when I want to upload an image from a computer and when from a remote URL?

Thanks for answers!

Answer 1

Toggle Button + Hidden Fields + JS Magic

Answer 2

In Chrome and Safari, the file upload form does not have a text field, for example, only the "Browse" button.
Probably, you need to make a text input and a button yourself, make the file field hidden and emulate the necessary events through JS. And on the server side, it’s already to sort out which field is filled in and how to load the file.

Answer 3

You need to make two different fields: one will be [input name='file' type='file'], the second [input name='url' type='text']. With CSS you can combine them into one. When the handler receives data, $_FILES will contain information on the sent file, and $_POST will contain information on the URL of this file.

Answer 4

You do understand that changing the shape visually will not be enough, right? You will have to add a script on the server that accepts files.

Answer 5

What prevents you from distinguishing a link from a local path in js?
test.org/picture.jpg
c://mydirectory/picture.jpg
To be honest, I probably did not understand until the end of the question.

Answer 6

The URL can also be inserted into the file selection form in the file name field.