A Pen by JFarrow.

Google-Drive-Direct-URL-Coverter.markdown

Google Drive Direct URL Coverter

Take your public file's share URL and convert it to a direct URL so you can link it as an asset in your web development project.

Forked from mariemosley's Pen Google Drive Direct URL Coverter.

A Pen by JFarrow on CodePen.

License.

index.html

<div class="linkinator">
<h1>Google Drive Asset Link Converter</h1>
<p>You can use Google Drive to host web assets &mdash; icons, font files, stylesheets, .js files, etc. But the share link needs a little tweak to turn it into a direct link to your asset. This converter does it for you. </p>
  <p>Paste in the "Link to Share" link for your <strong>PUBLIC ON THE WEB FILE</strong> and press the "Create Direct URL" button to get the direct link to your web asset.</p>
  <p><strong>Note:</strong> you can only link individual public files as assets, not folders. If your file is inside a folder, that folder must be public.</p>
<form>
<input type="text" length="150" class="link"></input>
<button>Create Direct URL</button>
</form>
<p class="results"></p>
</div>

script.js

$( document ).ready(function() {
  $('form').on('submit', function (e) {
    e.preventDefault();
     var yourlink = $('input[type="text"]').val();
     var link = yourlink.trim();
     
    if (link.indexOf('drive.google.com') == -1 || link.indexOf('file') == -1) {
     $('.results').show().text('Sorry, this only works on the public sharing link of Google Drive files');
      return false;
    }

     var pattern = /[0-9]/;
     var place = link.search(pattern);
     var urlkey = link.substr(place);
     var finalkey = urlkey.split('/')[0];
     $('.results').show().text('https://googledrive.com/host/' + finalkey);
  });
});

style.css

@import url(http://fonts.googleapis.com/css?family=Fredericka+the+Great);
@import url(http://fonts.googleapis.com/css?family=Buda);
body { 
  background: rgb(195,217,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgb(195,217,255) 0%, rgb(177,200,239) 41%, rgb(152,176,217) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(195,217,255)), color-stop(41%,rgb(177,200,239)), color-stop(100%,rgb(152,176,217))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgb(195,217,255) 0%,rgb(177,200,239) 41%,rgb(152,176,217) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgb(195,217,255) 0%,rgb(177,200,239) 41%,rgb(152,176,217) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgb(195,217,255) 0%,rgb(177,200,239) 41%,rgb(152,176,217) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgb(195,217,255) 0%,rgb(177,200,239) 41%,rgb(152,176,217) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3d9ff', endColorstr='#98b0d9',GradientType=0 ); /* IE6-9 */
  font-family: 'Buda', sans-serif;
}

.linkinator { 
  width: 65%;
  margin: 0 auto;
}

h1 {
    font-family: 'Fredericka the Great', serif;
  font-size: 2.5em;
  color: rgba(76, 76, 76,);
  text-shadow: 0px 1px 1px white;
}

p { 
  font-size: 1.2em;
  width: 85%;
  font-family: 'Buda', sans-serif;
} 

input[type='text'] { 
  width: 75%;
  height: 2.5em;
}

button {
  	border: none;
  font-size: inherit;
	  color: inherit;
	  background: none;
  	cursor: pointer;
  padding: 15px;
	  font-weight: 700;
  	outline: none;
  	-webkit-transition: all 0.3s;
	  -moz-transition: all 0.3s;
  	transition: all 0.3s;
  	background: rgb(126, 70, 116);
	  color: #fff;
  	box-shadow: 0 6px rgb(94, 53, 87);
	  -webkit-transition: none;
	  -moz-transition: none;
	  transition: none;
	  border-radius: 0 0 5px 5px;
}

button:hover {
	  box-shadow: 0 4px rgb(94, 53, 87);
	  top: 2px;
}

button:active {
  	box-shadow: 0 0 rgb(94, 53, 87);
	  top: 6px;
}

.results {
  display: none;
  width: 85%;
  background-color: white;
  color: rgb(177, 99, 163);
  padding: 1em;
  text-align: center;
}