Using images in different folder on server in a hype document

1

Hi all,

I’m sure there is an easy solution for this but is there a way in which a hype asset can show a image in a folder on my server?

My plan is to let people upload pictures to the folder in my server and then view it within a hype document when it’s being called.

I’ve been working hard to learn more JavaScript and I’ve been playing around with using Ajax/PHP to send data to and from a mysql database. I hope that if I can get a picture from a folder on my server, I can reference the image in my database and pull it through to hype when it’s required.

If anyone can think of different ways to achieve this I’d be really grateful for any help.

Thanks,

Chris

2

There's currently not a way to set a specific asset in Hype's Resources Library to be a URL instead of a file. (Though this is a popular request and there's already partial support via Export Scripts). Instead you'll need to use some code to dynamically set elements.

If this image is entirely known when creating the document itself, you can just make a Rectangle and choose Edit > Edit Element's Inner HTML and add something like an <img> tag that references the image.

But it sounds like this may be more dynamic in nature, so a flow would be:

  • Add a Unique Element ID or Class Name in the Identity Inspector to an element
  • In an On Scene Load handler look up this element via hypeDocument.getElementById() or a getElementsByClassName() type of call
  • Run whatever code you may need to fetch the URL of the image
  • Set the image via the hypeDocument.setElementProperty(element, 'background-image', imageURL) type of call or via setting the element.innerHTML to an <img> type of tag.
1 Like
3

Thanks for this. I've managed to pull an image from my server straight into the hype document. Now I've got to work out how to upload images from hype to my server which is proving to be more challenging than I expected.

1 Like
4

What approach are you taking? Typically you'd just export in Hype and then do an FTP upload of the resulting contents.

There isn't a specific requirement that your other resources need to be placed within the .hyperesources folder. Though if you want to do this or need a more merge-oriented process I'd recommend using the rsync command line tool if that is available to you.

5

Hi @jonathan. I’ve just read what I put in my last comment and, my apologies, I didn’t explain it that well. What I need is a interface to allow the user to upload a picture to my server. I need them to select the file, a preview of that file show up on the hype document and then a button to send to the server. I’ve done lots of tests sending information to a MySQL database but can’t work out how to send a user uploaded picture.

6

Gotchya. The typical approach is via an input type of "file" if this is something coming from a user's disk. I don't know what your backend technology is, but PHP makes it pretty easy to then get at these uploaded files as data (this page shows the basic technique). They do a "move_uploaded_file" but that would be replaced with a SQL call. There's plenty of other front and backend ways to do this though :slight_smile:.