Play and download audio file on the same page in Drupal - audio

First of all i work with Drupal 7.
I have a custom content type which allows me to upload an audio file.
I found a way to play the audio file when the user access a page of this content type.
Now i want to let the user download the audio file, but not remove the play capabilities. I want to add a download button on the same page (details page of the content type).
Can someone explain me how to do it ? I've got nowhere on this matter.

There are many ways to achieve this, depending on your drupal expertise. If you are using node templates, then you can print the same variable twice, once inside the music player plug in, and once with a download button. Something like this:
...... prints other fields .....
<my-audio-player src="<?php print $node->field_my_audio_field;?>"/>
Click to download
...... prints other fields .....
To force the download instead of opening, check this: Force browsers to download a file rather than open
To achieve this without writing any code or templates, you can do what Fleix Eve have suggested above. Set the display settings as direct download. Then create a block view which shows your audio file field, take the argument from URL. Then set tat block to display on node-view.

Related

trigger and fill image upload from url via chrome extension

I'm currently working on a chrome extension that injects a content script into a webpage that allows the user to autofill a form, and everything seems to be working correctly, with the text inputs. But I have not been able to figure out how to upload an image programmatically (simulating user input).
I need help creating a function that takes in a parameter of image url or data uri, and automatically triggers the file upload as if the user uploaded the image manually, to an input selector of my choice. End result should still keep the thumbnail and similar resolution intact.
Scope:
triggers file(image specifically) input automatically. Must include thumbnail and similar resolution intact
must include a parameter for image url/ or data uri
must include a parameter for input selector I target
must work from a chrome extension content script
must work on any file/image input on any page would be ideal
can be written in javascript or jquery, whichever you prefer
An extension that solves this problem perfectly can be found here, so I know this is possible, I just have not been able to replicate it: https://chrome.google.com/webstore/detail/upload-image-from-url/eiglgndkjiabiepkliiemoabepkkhacb. (the code is obfuscated, so I can't figure out how to replicate.

Can not drag file from local pc and drop on web page using python and selenium

I need drag file from my local pc and drop it on area on the web page
.send.keys('file_path') does not work.
drag_drop_area = driver.find_element_by_xpath("//*[#id='root']/main/div[3]/section[2]/div[2]/div[2]/div/div/div")
file = '/home/new/Desktop/CT_filters/Braid-s.png'
drag_drop_area.send_keys(file)
what is interesting place where I want to drag and drop file looks
and after run code looks like
Looks like some action was perform because field is highlighted
To upload a file from your PC with Selenium the best approach is to send the file path + name as a string to the appropriate element on the web page. This will not be an element you graphically clicking as a user with mouse rather some other element, normally located by this XPath:
//input[#type='file']
To give you more precise answer we need to see the actual web page HTML.

Why URL's "path" such as index.html was hidden?

In modern Website usually hidden path.
use this
https://google.com/main
instance of this
https://google.com/main.html
but I want to ask why they chose to hidden the file path.
I know that Initial web was use this file path.
But if they chose to cover up it, I think there was some reason.
Because of they just think it doesn't look good?
Or is there a security issue when using a file root?
in tranditional website.all content on the page is static and write in html file.so we can fetch and show the page directly by browser.
in modern internet,the content we browse is dynamic,for example we browse a news page,the content changed every second,so the server handle our request by some function not handle by a static html file,the function always print out latest news,so it is dynamic,not a unchanged static html file.

Override downloading a file type with Chrome Extensions

I'm trying to build a chrome extension that overrides a download of a file and displays it in the browser. For example if you click on a link to a '.csv' file I'd like it to render in the browser instead of downloading it.
Chrome already does it for PDF's types and the Xml Tree extension also does exactly that for xml files.
So it should be possible, just not sure how to go about catching that event?
An implementation along the lines indicated by in the previous answers and specifically designed for CSV files can be found in this extension of mine on github:
https://github.com/rgrp/chrome-csv-viewer
Furthermore, with the new(ish) chrome webrequest API a direct approach is also now possible along the following lines:
Listen to onBeforeRequest (this has to be in a background script - see background.js)
Check if this is a CSV file (mimetype or file extension)
If so cancel the request and then display the data using xhr
A working version of this can be found in a branch of that extension: https://github.com/rgrp/chrome-csv-viewer/tree/4-webrequest-intercept
You could always look at the XML Tree code :).
If you only need to work with links, and not opening files from the address bar or File > Open, you could build a content script that adds a click event listener to every link.
In the event listener function:
Add e.preventDefault() in the first line to prevent the browser 'following' the link.
Using the link href value, get the data with XMLHttpRequest.
In the XMLHttpRequest callback, open a new tab and render content accordingly.
Obviously, in many ways, this is not a great solution:
you want 'normal' links to be handled as usual by the browser
how can you tell if a text file contains comma-separated values (for example) except by looking at the file extension which, of course, may not be reliable?
Are you specifically thinking of .csv files -- and/or other specific types of content?

Printing a webpage with JSF

I have seen webpage with a PDF icon, where you could click on it to print the content of that webpage.
The page i am intending to add the print feature is designed in JSF, so is there anyway where i could add a print button, to get the webpage printed ?
No, you must do this yourself. Get some PDF library (for example iText), then get web page output (plain HTML). Then you will have to iterate thru HTML and create PDF version (for example build iText document). You will probably have to do this yourself, because some elements (javascript powered) will need to turn into static content. Nobody but you knows how the output should look like.

Resources