0

I've never done much css so I apologize if this is an obvious question but I've tried a million things and nothing's worked. I currently have an image that I'm trying to use as an upload button. The problem right now is that it's not marked as a file input so there are no files selected when I call my uploadFile() function which causes, obviously, a whole bunch of problems. A lot of the fixes I've found still end up with the default "upload" button that comes with the browser.

Edit: I've seen this post - Replace input type=file by an image - and maybe I'm stupid but I can't seem to get it to be on the top right side of the screen where I want it, and whenever I use that fix I end up with a big white bar at the top of the screen. Again I'm not great with css so I'm probably missing an easy fix.

Edit2: I basically want to do exactly what this guy did but with the button on the right side of the page. https://stackoverflow.com/a/40235746/9830411

Here's the html: 

<img id="uploadButton1" class="upperButton" src="./imgs/uploadImage.png" onclick="uploadFile();" onmouseover="toggleChangeLandType();" onmouseout="toggleChangeLandType();">

And the CSS: 

#uploadButton1{
right: 3vw;
}
Mitch Kerr
  • 13
  • 4
  • 2
    Possible duplicate of [Replace input type=file by an image](https://stackoverflow.com/questions/2855589/replace-input-type-file-by-an-image) – Kodie Grantham May 22 '18 at 18:44
  • @Mitch - good edit that you've seen the other question, but this is still a duplicate of that one -- however, if you rephrase the question like "I'm trying this (link) technique but it's not showing up like I want (show desired, show actual)" ... `?` (just a thought) – Stephen P May 22 '18 at 18:50
  • Sorry but it's not clear what you're trying to achieve. **So.. the goal here is to simply create an upload through the image file?** I have a sneaking suspicion this is an issue regarding AJAX uploading, rather than issue of the picture being there (so html/css). Even then it's not clear where exactly are you trying to upload the files, what files and so on. If the answer to my question is yes, then check the AJAX upload manual here: http://blog.teamtreehouse.com/uploading-files-ajax – Samuel Hulla May 22 '18 at 18:53
  • Sorry, I'm just trying to upload a file (the code for what's to be done with the file is all good) and I want the button that opens the file browser to be an image that I have (./imgs/uploadImage.png). But I'm new to css and can't get the image to be in the top right while also being of type=input. – Mitch Kerr May 22 '18 at 18:55
  • "how to style an input" is not the same as "Using image as button to upload file". Based off the title of the question, it's been answered in another question. If you want to just move it to the right of the screen, there are CSS property/value pairs that can help you, but you should do yourself a favor and learn them or else you'll be on stackoverflow forever. [This](https://developer.mozilla.org/en-US/docs/Web/CSS) is a great resource and tool to use. Otherwise, answers will be too broad, because how it's done is based on you web page layout and other elements, which we don't have access to. – soulshined May 22 '18 at 19:09

1 Answers1

0

If you want to do something like this Replace input type=file by an image, and just want the button to be on the right, maybe you mean something like this:

<div class="image-upload" align="right">
  <label for="file-input">
    <img src="https://placehold.it/100/000000/ffffff?text=UPLOAD" style="pointer-events: none"/>
  </label>

  <input id="file-input" type="file" />
</div>

*Just add align="right" in div tag.

Hartanto
  • 49
  • 10