I am using images in svg format for the first time. and they aren't displayed my project. I tried with png and it works. I also tried changing the size, color etc.. Thank you!
Data file where the images and their title are stored (
I don't think that's the problem because when I replace the links with .jpg pictures, it works)
<?php
namespace App;
class Data{
public static function getSkills()
{
return [
// array data
array("name" => "HTML5", "icon" => '/home/student/Bureau/Portfolio/public/images/skills/bootstrap.svg'),
array("name" => "CSS3", "icon" => 'public/images/skills/css.svg' ),
array("name" => "Sass", "icon" => 'public/images/skills/html5.svg'),
array("name" => "Bootstrap", "icon" => 'public/images/skills/html5.svg'),
array("name" => "JavaScript", "icon" => 'public/images/skills/html5.svg'),
array("name" => "MySQL", "icon" => 'public/images/skills/html5.svg'),
array("name" => "PHP", "icon" => 'public/images/skills/html5.svg'),
array("name" => "React JS", "icon" => 'public/images/skills/html5.svg'),
array("name" => "Redux", "icon" => 'public/images/skills/html5.svg'),
array("name" => "GitHub", "icon" => 'public/images/skills/html5.svg'),
array("name" => "Trello", "icon" => 'public/images/skills/html5.svg'),
array("name" => "VSCode", "icon" => 'public/images/skills/html5.svg'),
array("name" => "Linux Ubuntu", "icon" => 'public/images/skills/html5.svg'),
];
}
}
Controller
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Data;
class SkillsController extends Controller
{
public function index()
{
return view('competences', [
'competences' => Data::getSkills()
]);
}
}
competences.blade.php
#include('layouts/navbar')
<div class="skills">
<h1 class="skills-title text-center"> <span class="the-span "> Compétences </span></h1>
<h2 class="subtitle text-center"> <span class="the-span "> •Les langages, outils et frameworks que j’utilise </span></h2>
<ul class="skills-list text-center m-auto">
#foreach ($competences as $competence)
<li class="skills-list-skill" key="{{$competence['icon']}}">
<embedy src="{{$competence['icon']}}" alt="" class="skills-list-skill-icon" />
<p class="skills-list-skill-title">{{$competence['name']}}</p>
</li>
#endforeach
</ul>
</div>
#include ('layouts/footer')
Scss file
// Variables
#import 'variables';
.skills {
margin-bottom: 10em;
margin: 3em 0 2em 1em;
&-list {
display: flex;
flex-wrap: wrap;
#media screen and (min-width: 1440px) {
width: 60%;
}
#media screen and (min-width: 1024px) {
width: 70%;
}
&-skill {
width: 7em;
#media screen and (max-width: 320px) {
width: 5em;
}
background-color: $second-font-color;
margin: 3em 3em 1em 0;
min-height: 7em;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 1em;
border-radius: .5em;
font-size: .8em;
text-align: center;
&:nth-child(odd) {
img {
color: $font-color;
}
}
&:nth-child(even) {
img {
color: $second-font-color;
}
}
&:hover {
transition: .8s;
box-shadow: 0px 0px 20px 2px rgba(255, 255, 255, 0.4);
}
&-icon {
padding: 1em 2em;
width: 40px;
height: 40px;
color : white;
}
}
}
}
I don't know what is <embedy> tag for, you can simply try load your svg icon with img tag
<img src="{{$competence['icon']}}" alt="" class="skills-list-skill-icon" />
also you dont need to add complete address to getaddress method ,you can just add icon name and in code load with asset
<img src="{{asset('/images/skills/'.$competence['icon'].')}}" alt="" class="skills-list-skill-icon" />
I'm working on customisable dashboard where (amongst other features) users can drag dashboard tiles (div elements) around and reposition those tiles anywhere in the dashboard.
HTML Structure
The html structure is similar to the snippet below
<div class="dashboard">
<div class="tile"><canvas/></div>
<div class="tile"><canvas/></div>
<div class="tile empty"></div>
</div>
Expected Behavior
The idea is that the .dashboard can contain multiple .tiles and each .tile contains a report (a graph/chart drawn on a canvas element). Some of these .tiles can be .empty, as in, not containing any report. Then .tile can be dragged and dropped into the .empty tiles.
So, div.tile.empty serves as "dropzone" while div.tile will be draggable elements. A fiddler snippet has been added below for a simplistic-but-fully-functional example.
Libraries used
jQuery
ChartJs. An open source js library to draw charts on a canvas
The problem
It all seems to work well, except that after dropping a .tile the canvas resets its width/height to zero!!! And I haven't found a way to reset it back to its original dimensions before the drag/drop events. Even if I set the width/height manually, nothing is drawn on the canvas.
Question
Is there any way I can preserve (or recover) the width/height of the canvas while also getting it to re-drawn the graph after drag/dropping?
I tried using chartjs's update, render and resize functions to no avail.
The documentation of these functions can be found in the link below (version 3.5.0)...
https://www.chartjs.org/docs/3.5.0/developers/api.html
Code Example
Here's a sample code snippet where you can reproduce the issue mentioned above. The buttons are my attempt to update/resize/re-render the graphs after drag/dropping.
var $sourceTile = null;
var charts = [];
$(() => {
$(".buttons-container a").on("click", btnClickHandler);
renderChart("canvas1", 'doughnut');
renderChart("canvas2", "line");
attachDropHandlers();
});
attachDropHandlers = () => {
$(".tile").off("dragstart").off("dragover").off("drop");
$(".tile .report").on("dragstart", dragStartHandler);
$(".tile.empty").on("dragover", dragOverHandler);
$(".tile.empty").on("drop", dropHandler);
}
dragStartHandler = (e) => {
const $target = $(e.target);
const $report = $target.is(".report") ? $target : $target.parents(".report");
$sourceTile = $report.parents(".tile");
e.originalEvent.dataTransfer.setData("application/dashboard", $report[0].id);
e.originalEvent.dataTransfer.effectAllowed = "move";
e.originalEvent.dataTransfer.dropEffect = "move";
}
dragOverHandler = (e) => {
e.preventDefault();
e.originalEvent.dataTransfer.dropEffect = "move";
}
dropHandler = (e) => {
e.preventDefault();
const id = e.originalEvent.dataTransfer.getData("application/dashboard");
if (id) {
$("#" + id).appendTo(".tile.empty");
$(".tile.empty").removeClass("empty");
if ($sourceTile) {
$sourceTile.addClass("empty");
attachDropHandlers();
}
}
}
renderChart = (canvasId, type) => {
const labels = ["Red", "Green", "Blue"];
const data = [30, 25, 42];
const colors = ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)'];
const canvas = document.getElementById(canvasId);
const ctx = canvas.getContext('2d');
const chart = new Chart(ctx, {
type: type,
data: {
labels: labels,
datasets: [{
data: data,
backgroundColor: colors,
borderColor: colors,
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: true,
aspectRatio: 1,
plugins: {
legend: {
display: false
},
htmlLegend: {
tile: this.$tile,
maxItems: 8
}
}
}
});
chart.update();
charts.push(chart);
}
btnClickHandler = (e) => {
const button = e.target.id;
switch (button) {
case "btn1":
charts.forEach((chart) => chart.update());
break;
case "btn2":
charts.forEach((chart) => chart.update('resize'));
break;
case "btn3":
charts.forEach((chart) => chart.render());
break;
case "btn4":
charts.forEach((chart) => chart.resize());
break;
case "btn5":
charts.forEach((chart) => chart.resize(120, 120));
break;
}
}
html,
body {
background-color: #eee;
}
h3 {
margin: 0;
padding: 10px;
}
.dashboard {}
.dashboard .tile {
display: inline-block;
vertical-align: top;
margin: 5px;
height: 250px;
width: 250px;
}
.tile.empty {
border: 2px dashed #ccc;
}
.report {
height: 250px;
width: 250px;
background-color: #fff;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.buttons-container {
display: flex;
justify-content: space-between;
margin: 20px 0;
}
.buttons-container a {
background-color: #673AB7;
color: #EDE7F6;
cursor: pointer;
padding: 10px 15px;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.buttons-container a:hover {
background-color: #7E57C2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.6.0/dist/chart.min.js"></script>
<div class="dashboard">
<div class="tile">
<div id="report1" class="report" draggable="true">
<h3>
Report 1
</h3>
<div style="padding:10px;height:180px;width:180px">
<canvas id="canvas1"></canvas>
</div>
</div>
</div>
<div class="tile">
<div id="report2" class="report" draggable="true">
<h3>
Report 2
</h3>
<div style="padding:10px;height:180px;width:180px">
<canvas id="canvas2"></canvas>
</div>
</div>
</div>
<div class="tile empty">
</div>
</div>
<div class="buttons-container">
<a id="btn1">update()</a>
<a id="btn2">update('resize')</a>
<a id="btn3">render()</a>
<a id="btn4">resize()</a>
<a id="btn5">resize(120,120)</a>
</div>
This is a Chart.js issue of version 3.6.0 and fixed in version 3.6.1. Example below:
var $sourceTile = null;
var charts = [];
$(() => {
$(".buttons-container a").on("click", btnClickHandler);
renderChart("canvas1", 'doughnut');
renderChart("canvas2", "line");
attachDropHandlers();
});
attachDropHandlers = () => {
$(".tile").off("dragstart").off("dragover").off("drop");
$(".tile .report").on("dragstart", dragStartHandler);
$(".tile.empty").on("dragover", dragOverHandler);
$(".tile.empty").on("drop", dropHandler);
}
dragStartHandler = (e) => {
const $target = $(e.target);
const $report = $target.is(".report") ? $target : $target.parents(".report");
$sourceTile = $report.parents(".tile");
e.originalEvent.dataTransfer.setData("application/dashboard", $report[0].id);
e.originalEvent.dataTransfer.effectAllowed = "move";
e.originalEvent.dataTransfer.dropEffect = "move";
}
dragOverHandler = (e) => {
e.preventDefault();
e.originalEvent.dataTransfer.dropEffect = "move";
}
dropHandler = (e) => {
e.preventDefault();
const id = e.originalEvent.dataTransfer.getData("application/dashboard");
if (id) {
$("#" + id).appendTo(".tile.empty");
$(".tile.empty").removeClass("empty");
if ($sourceTile) {
$sourceTile.addClass("empty");
attachDropHandlers();
}
}
}
renderChart = (canvasId, type) => {
const labels = ["Red", "Green", "Blue"];
const data = [30, 25, 42];
const colors = ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)'];
const canvas = document.getElementById(canvasId);
const ctx = canvas.getContext('2d');
const chart = new Chart(ctx, {
type: type,
data: {
labels: labels,
datasets: [{
data: data,
backgroundColor: colors,
borderColor: colors,
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: true,
aspectRatio: 1,
plugins: {
legend: {
display: false
},
htmlLegend: {
tile: this.$tile,
maxItems: 8
}
}
}
});
chart.update();
charts.push(chart);
}
btnClickHandler = (e) => {
const button = e.target.id;
switch (button) {
case "btn1":
charts.forEach((chart) => chart.update());
break;
case "btn2":
charts.forEach((chart) => chart.update('resize'));
break;
case "btn3":
charts.forEach((chart) => chart.render());
break;
case "btn4":
charts.forEach((chart) => chart.resize());
break;
case "btn5":
charts.forEach((chart) => chart.resize(120, 120));
break;
}
}
html,
body {
background-color: #eee;
}
h3 {
margin: 0;
padding: 10px;
}
.dashboard {}
.dashboard .tile {
display: inline-block;
vertical-align: top;
margin: 5px;
height: 250px;
width: 250px;
}
.tile.empty {
border: 2px dashed #ccc;
}
.report {
height: 250px;
width: 250px;
background-color: #fff;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.buttons-container {
display: flex;
justify-content: space-between;
margin: 20px 0;
}
.buttons-container a {
background-color: #673AB7;
color: #EDE7F6;
cursor: pointer;
padding: 10px 15px;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.buttons-container a:hover {
background-color: #7E57C2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.6.1/dist/chart.min.js"></script>
<div class="dashboard">
<div class="tile">
<div id="report1" class="report" draggable="true">
<h3>
Report 1
</h3>
<div style="padding:10px;height:180px;width:180px">
<canvas id="canvas1"></canvas>
</div>
</div>
</div>
<div class="tile">
<div id="report2" class="report" draggable="true">
<h3>
Report 2
</h3>
<div style="padding:10px;height:180px;width:180px">
<canvas id="canvas2"></canvas>
</div>
</div>
</div>
<div class="tile empty">
</div>
</div>
<div class="buttons-container">
<a id="btn1">update()</a>
<a id="btn2">update('resize')</a>
<a id="btn3">render()</a>
<a id="btn4">resize()</a>
<a id="btn5">resize(120,120)</a>
</div>
Is there a way to affect a single Dojo button's color? I want to be able to override the default button color for specific buttons. In the JSP markup I have a button defined like so:
<button class="jelam-button-blue" data-dojo-type="dijit/form/Button" data-dojo-id="usdotSearchButton" id="usdotSearchButton" type="button" onClick="csfController.usdotSearch()">Search</button>
where the "jelam-button-blue" is defined in our css file like so:
.jelam-button-blue {
background-color: #5494c7 !important;
background-image: none !important;
border: 1px solid #a6cdec !important;
border-radius: 0 !important;
color: #ffffff !important;
height: 38px;
}
.jelam-button-blue .dijitReset.dijitInline.dijitButtonText {
font-size: 16px;
font-weight: normal !important;
position: relative;
top: 2px;
}
This does not result in the button turning blue as I would like. The markup that gets generated from the button markup is:
<span role="presentation" class="dijit dijitReset dijitInline dijitButton" widgetid="usdotSearchButton">
<span role="presentation" data-dojo-attach-event="ondijitclick:__onClick" class="dijitReset dijitInline dijitButtonNode">
<span aria-labelledby="usdotSearchButton_label" role="button" data-dojo-attach-point="titleNode,focusNode" class="dijitReset dijitStretch dijitButtonContents" tabindex="0" id="usdotSearchButton" style="-moz-user-select: none;">
<span data-dojo-attach-point="iconNode" class="dijitReset dijitInline dijitIcon dijitNoIcon"></span>
<span class="dijitReset dijitToggleButtonIconChar">●</span>
<span data-dojo-attach-point="containerNode" id="usdotSearchButton_label" class="dijitReset dijitInline dijitButtonText">Search</span>
</span>
</span>
<input type="button" data-dojo-attach-point="valueNode" role="presentation" tabindex="-1" data-dojo-attach-event="onclick:_onClick" class="dijitOffScreen" value="">
</span>
and the generated markup doesn't include any reference to the "jelam-button-blue" class that I had specified.
I'm including the dojo module from my local theme, defining the dojoConfig variable before I include the dojo.js like so:
<script>
var dojoConfig = {
baseUrl: "/CompassThemesURS/themes/html/commonurs/",
async: false, // to support older pre-AMD IBM modules
tlmSiblingOfDojo: false,
packages: [
{ name: "gridx", location: "dojo/gridx-1.3.0" },
{ name: "dojo", location: "dojo/1.9.1/dojo" },
{ name: "dijit", location: "dojo/1.9.1/dijit" },
{ name: "dojox", location: "dojo/1.9.1/dojox" },
{ name: "commonjs", location: "js" }
]
};
</script>
<script src="/CompassThemesURS/themes/html/commonurs/dojo/1.9.1/dojo/dojo.js.uncompressed.js"
data-dojo-config="isDebug:true, parseOnLoad: false"></script>
Is there a way to turn just the designated button a specified color?
Thanks.
You have to update the dijitButtonNode color.
I Changed your css to:
.jelam-button-blue .dijitButtonNode {
background-color: #5494c7 !important;
background-image: none !important;
border: 1px solid #a6cdec !important;
border-radius: 0 !important;
color: #ffffff !important;
}
http://jsfiddle.net/theinnkeeper/eyLewa1n/2/
Is it possible to change the appearance of <input type="file">?
You can’t modify much about the input[type=file] control itself.
Since clicking a label element correctly paired with an input will activate/focus it, we can use a label to trigger the OS browse dialog.
Here is how you can do it…
label {
cursor: pointer;
/* Style as you please, it will become the visible UI component. */
}
#upload-photo {
opacity: 0;
position: absolute;
z-index: -1;
}
<label for="upload-photo">Browse...</label>
<input type="file" name="photo" id="upload-photo" />
The CSS for the form control will make it appear invisible and not take up space in the document layout, but will still exist so it can be activated via the label.
If you want to display the user’s chosen path after selection, you can listen for the change event with JavaScript and then read the path that the browser makes available to you (for security reasons it can lie to you about the exact path). A way to make it pretty for the end user is to simply use the base name of the path that is returned (so the user simply sees the chosen filename).
There is a great guide by Tympanus for styling this.
Something like that maybe?
<form>
<input id="fileinput" type="file" style="display:none;"/>
</form>
<button id="falseinput">El Cucaratcha, for example</button>
<span id="selected_filename">No file selected</span>
<script>
$(document).ready( function() {
$('#falseinput').click(function(){
$("#fileinput").click();
});
});
$('#fileinput').change(function() {
$('#selected_filename').text($('#fileinput')[0].files[0].name);
});
</script>
<label for="fusk">dsfdsfsd</label>
<input id="fusk" type="file" name="photo" style="display: none;">
why not? ^_^
See the example here
If you're using Bootstrap here is a better solution:
<label class="btn btn-default btn-file">
Browse <input type="file" style="display: none;" required>
</label>
For IE8 and below: https://www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/#legacy-approach-(ie8-and-below)
Source: https://stackoverflow.com/a/18164555/625952
Easiest way..
<label>
Upload
<input type="file" style="visibility: hidden;"/>
</label>
The trick is hide the input and customize the label.
HTML:
<div class="inputfile-box">
<input type="file" id="file" class="inputfile" onchange='uploadFile(this)'>
<label for="file">
<span id="file-name" class="file-box"></span>
<span class="file-button">
<i class="fa fa-upload" aria-hidden="true"></i>
Select File
</span>
</label>
</div>
CSS:
.inputfile-box {
position: relative;
}
.inputfile {
display: none;
}
.container {
display: inline-block;
width: 100%;
}
.file-box {
display: inline-block;
width: 100%;
border: 1px solid;
padding: 5px 0px 5px 5px;
box-sizing: border-box;
height: calc(2rem - 2px);
}
.file-button {
background: red;
padding: 5px;
position: absolute;
border: 1px solid;
top: 0px;
right: 0px;
}
JS:
function uploadFile(target) {
document.getElementById("file-name").innerHTML = target.files[0].name;
}
You can check this example: https://jsfiddle.net/rjurado/hnf0zhy1/4/
In webkit you can try this out...
input[type="file"]::-webkit-file-upload-button{
/* style goes here */
}
first of all it's a container:
<div class="upload_file_container">
Select file!
<input type="file" name="photo" />
</div>
The second, it's a CSS style, if you want to real more customization, just keeping your eyes is open :)
.upload_file_container{
width:100px;
height:40px;
position:relative;
background(your img);
}
.upload_file_container input{
width:100px;
height:40px;
position:absolute;
left:0;
top:0;
cursor:pointer;
}
This example hasn't style for text inside the button, it depends on font-size, just correct the height and padding-top values for container
It's much better if you just use a <label>, hide the <input>, and customize the label.
HTML:
<input type="file" id="input">
<label for="input" id="label">Choose File</label>
CSS:
input#input{
display: none;
}
label#label{
/* Customize your label here */
}
Bootstrap example
<label className="btn btn-info btn-lg">
Upload
<input type="file" style="display: none" />
</label>
Here is a quick pure CSS workaround (works on chrome and has a FireFox fallback included), including the file name,a label and an custom upload button, does what it should - no need for JavaScript at all! 🎉
Note: ☝ anyways, I would not use it on a real world website - if browser compatibility is a thing to you (what it should be). So it's more kind of experimental, otherwise while time goes by, it could be that this isn't an issue today.
.fileUploadInput {
display: grid;
grid-gap: 10px;
position: relative;
z-index: 1; }
.fileUploadInput label {
display: flex;
align-items: center;
color: setColor(primary, 0.5);
background: setColor(white);
transition: .4s ease;
font-family: arial, sans-serif;
font-size: .75em;
font-weight: regular; }
.fileUploadInput input {
position: relative;
z-index: 1;
padding: 0 gap(m);
width: 100%;
height: 50px;
border: 1px solid #323262;
border-radius: 3px;
font-family: arial, sans-serif;
font-size: 1rem;
user-select: none;
cursor: pointer;
font-weight: regular; }
.fileUploadInput input[type="file"] {
padding: 0 gap(m); }
.fileUploadInput input[type="file"]::-webkit-file-upload-button {
visibility: hidden;
margin-left: 10px;
padding: 0;
height: 50px;
width: 0; }
.fileUploadInput button {
position: absolute;
right: 0;
bottom: 0;
width: 50px;
height: 50px;
line-height: 0;
user-select: none;
color: white;
background-color: #323262;
border-radius: 0 3px 3px 0;
font-family: arial, sans-serif;
font-size: 1rem;
font-weight: 800; }
.fileUploadInput button svg {
width: auto;
height: 50%; }
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
border: 0px;
outline: 0;
background-repeat: no-repeat;
appearance: none;
border-radius: 0;
vertical-align: middle;
font-weight: inherit;
font-style: inherit;
font-family: inherit;
text-decoration: none;
list-style: none;
user-select: text;
line-height: 1.333em; }
body {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
background: rgba(66, 50, 98, 0.05); }
.container {
padding: 25px;
box-shadow: 0 0 20px rgba(66, 50, 98, 0.35);
border: 1px solid #eaeaea;
border-radius: 3px;
background: white; }
#-moz-document url-prefix() {
.fileUploadInput button{
display: none
}
}
<!-- Author: Ali Soueidan-->
<!-- Author URI: https//: www.alisoueidan.com-->
<div class="container">
<div class="fileUploadInput">
<label>✨ Upload File</label>
<input type="file" />
<button>+</button></div>
</div>
to show path of selected file you can try this
on html :
<div class="fileinputs">
<input type="file" class="file">
</div>
and in javascript :
var fakeFileUpload = document.createElement('div');
fakeFileUpload.className = 'fakefile';
var image = document.createElement('div');
image.className='fakebtn';
image.innerHTML = 'browse';
fakeFileUpload.appendChild(image);
fakeFileUpload.appendChild(document.createElement('input'));
var x = document.getElementsByTagName('input');
for (var i=0;i<x.length;i++) {
if (x[i].type != 'file') continue;
if (x[i].parentNode.className != 'fileinputs') continue;
x[i].className = 'file hidden';
var clone = fakeFileUpload.cloneNode(true);
x[i].parentNode.appendChild(clone);
x[i].relatedElement = clone.getElementsByTagName('input')[0];
x[i].onchange = x[i].onmouseout = function () {
this.relatedElement.value = this.value;
}
}
and style :
div.fileinputs {
position: relative;
height: 30px;
width: 370px;
}
input.file.hidden {
position: relative;
text-align: right;
-moz-opacity: 0;
filter: alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
right: 0;
width: 370px;
padding: 0;
margin: 0;
z-index: 1;
line-height: 90%;
}
div.fakefile input {
margin-bottom: 5px;
margin-left: 0;
border: none;
box-shadow: 0px 0px 2px 1px #ccc;
padding: 4px;
width: 241px;
height: 20px;
}
div.fakefile .fakebtn{
width: 150px;
background: #eb5a41;
z-index: 10;
font-family: roya-bold;
border: none;
padding: 5px 15px;
font-size: 18px;
text-align: center;
cursor: pointer;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
display: inline;
margin-left: 3px;
}
div.fileinputs input[type="file"]:hover + div .fakebtn{
background: #DA472E;
}
div.fileinputs input[type="file"] {
opacity: 0;
position: absolute;
top: -6px;
right: 0px;
z-index: 20;
width: 102px;
height: 40px;
cursor: pointer;
}
Here is one way which I like because it makes the input fill out the whole container. The trick is the "font-size: 100px", and it need to go with the "overflow: hidden" and the relative position.
<div id="upload-file-container" >
<input type="file" />
</div>
#upload-file-container {
width: 200px;
height: 50px;
position: relative;
border: dashed 1px black;
overflow: hidden;
}
#upload-file-container input[type="file"]
{
margin: 0;
opacity: 0;
font-size: 100px;
}
I went for this option which clarifies how to fully customize the browse button by including an handler of the uploaded file name, also customized.
It adds additional fields and client-side controls on them just to show how to include the browse in a "real" form, not just a standalone.
Here's the codepen: http://codepen.io/emiemi/pen/zxNXWR
JS:
//click on our custom btn triggers a click on the hidden actual file input
$("#btnup").click(function(){
$("#fileup").click();
});
//changes on the three fields (input, tit,and name) trigger a control which checks if the 3 fields are all filled and if file field is valid (an image is uploaded)
$('#fileup').change(function(){
var formDOMObj = document.upload;
//here we assign tu our text field #fileup the name of the selected file
var res=$('#fileup').val();
var arr = res.split("\\");
//if file is not valid we show the error icon and the red alert
if (formDOMObj.fileup.value.indexOf(".jpg") == -1 && formDOMObj.fileup.value.indexOf(".png") == -1 && formDOMObj.fileup.value.indexOf(".jpeg") == -1 && formDOMObj.fileup.value.indexOf(".bmp") == -1 && formDOMObj.fileup.value.indexOf(".JPG") == -1 && formDOMObj.fileup.value.indexOf(".PNG") == -1 && formDOMObj.fileup.value.indexOf(".JPEG") == -1 && formDOMObj.fileup.value.indexOf(".BMP") == -1){
$( ".imgupload" ).hide("slow");
$( ".imguploadok" ).hide("slow");
$( ".imguploadstop" ).show("slow");
$('#nomefile').css({"color":"red","font-weight":700});
$('#nomefile').html("The file "+arr.slice(-1)[0]+" is not an image!");
$( "#bottone" ).hide();
$( "#fakebtn" ).show();
}else{
//if file is valid we show the green alert
$( ".imgupload" ).hide("slow");
$( ".imguploadstop" ).hide("slow");
$( ".imguploadok" ).show("slow");
$('#nomefile').html(arr.slice(-1)[0]);
$('#nomefile').css({"color":"green","font-weight":700});
if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
//if all three fields are valid the fake input btn is hidden and the actual one i s finally hown
$( "#fakebtn" ).hide();
$( "#bottone" ).show();
}
}
});
$('#nome').change(function(){
//same as file change but on name field
var formDOMObj = document.upload;
if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
$( "#fakebtn" ).hide();
$( "#bottone" ).show();
}else{
$( "#bottone" ).hide();
$( "#fakebtn" ).show();
}
});
$('#tit').change(function(){
//same as file change but on tit field
var formDOMObj = document.upload;
if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
$( "#fakebtn" ).hide();
$( "#bottone" ).show();
}else{
$( "#bottone" ).hide();
$( "#fakebtn" ).show();
}
});
HTML:
<form name="upload" method="post" action="/" enctype="multipart/form-data" accept-charset="utf-8">
<div class="row">
<div class="col-md-6 center">
<!--this is the actual file input, s hidden beacause we wanna use our custom one-->
<input type="file" value="" class="hidden" name="fileup" id="fileup">
<div class="btn-container">
<!--the three icons: default, ok file (img), error file (not an img)-->
<h1 class="imgupload"><i class="fa fa-file-image-o"></i></h1>
<h1 class="imguploadok"><i class="fa fa-check"></i></h1>
<h1 class="imguploadstop"><i class="fa fa-times"></i></h1>
<!--this field changes dinamically displaying the filename we are trying to upload-->
<p id="nomefile">Only pics allowed! (jpg,jpeg,bmp,png)</p>
<!--our custom btn which triggers the actual hidden one-->
<button type="button" id="btnup" class="btn btn-primary btn-lg">Browse for your pic!</button>
</div>
</div>
<!--additional fields-->
<div class="col-md-6">
<div class="row">
<div class="form-group" id="top">
<div class="col-md-12">
<input type="text" maxlength="100" class="form-control" name="nome" id="nome" placeholder="Your Name">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<input type="text" maxlength="50" class="form-control" name="tit" id="tit" placeholder="I am rubber, you are glue">
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<p class="white">All fields are mandatory</p>
</div>
<div class="col-md-4">
<!--the defauld disabled btn and the actual one shown only if the three fields are valid-->
<input type="submit" value="Submit!" class="btn btn-primary" id="bottone" style="padding-left:50px; padding-right:50px; display:none;">
<button type="button" class="btn btn-default" disabled="disabled" id="fakebtn" style="padding-left:40px; padding-right:40px;">Submit! <i class="fa fa-minus-circle"></i></button>
</div>
</div>
</div>
</div>
$(document).ready(function () {
$(document).mousemove(function () {
$('#myList').css('display', 'block');
$("#seebtn").css('display', 'none');
$("#hidebtn").css('display', 'none');
$('#displayFileNames').html('');
$("#myList").html('');
var fileArray1 = document.getElementsByClassName('file-input');
for (var i = 0; i < fileArray1.length; i++) {
var files = fileArray1[i].files;
for (var j = 0; j < files.length; j++) {
$("#myList").append("<li style='color:black'>" + files[j].name + "</li>");
}
};
if (($("#myList").html()) != '') {
$('#unselect').css('display', 'block');
$('#divforfile').css('color', 'green');
$('#attach').css('color', 'green');
$('#displayFileNames').html($("#myList").children().length + ' ' + 'files selezionato');
};
if (($("#myList").html()) == '') {
$('#divforfile').css('color', 'black');
$('#attach').css('color', 'black');
$('#displayFileNames').append('Nessun File Selezionato');
};
});
});
function choosefiles(obj) {
$(obj).hide();
$('#myList').css('display', 'none');
$('#hidebtn').css('display', 'none');
$("#seebtn").css('display', 'none');
$('#unselect').css('display', 'none');
$("#upload-form").append("<input class='file-input inputs' type='file' onclick='choosefiles(this)' name='file[]' multiple='multiple' />");
$('#displayFileNames').html('');
}
$(document).ready(function () {
$('#unselect').click(function () {
$('#hidebtn').css('display', 'none');
$("#seebtn").css('display', 'none');
$('#displayFileNames').html('');
$("#myList").html('');
$('#myFileInput').val('');
document.getElementById('upload-form').reset();
$('#unselect').css('display', 'none');
$('#divforfile').css('color', 'black');
$('#attach').css('color', 'black');
});
});
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.divs {
position: absolute;
display: inline-block;
background-color: #fff;
}
.inputs {
position: absolute;
left: 0px;
height: 2%;
width: 15%;
opacity: 0;
background: #00f;
z-index: 100;
}
.icons {
position: absolute;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form id='upload-form' action='' method='post' enctype='multipart/form-data'>
<div class="divs" id="divforfile" style="color:black">
<input id='myFileInput' class='file-input inputs' type='file' name='file[]' onclick="choosefiles(this)" multiple='multiple' />
<i class="material-icons" id="attach" style="font-size:21px;color:black">attach_file</i><label>Allegati</label>
</div>
</form>
<br />
</div>
<br />
<div>
<button style="border:none; background-color:white; color:black; display:none" id="seebtn"><p>Files ▼</p></button>
<button style="border:none; background-color:white; color:black; display:none" id="hidebtn"><p>Files ▲</p></button>
<button type="button" class="close" aria-label="Close" id="unselect" style="display:none;float:left">
<span style="color:red">×</span>
</button>
<div id="displayFileNames">
</div>
<ul id="myList"></ul>
</div>
This is my fully functional customerized file upload/Attachment using jquery & javascript (Visual studio). This will be useful !
Code will be available at the comment section !
Link : https://youtu.be/It38OzMAeig
Enjoy :)
$(document).ready(function () {
$(document).mousemove(function () {
$('#myList').css('display', 'block');
$("#seebtn").css('display', 'none');
$("#hidebtn").css('display', 'none');
$('#displayFileNames').html('');
$("#myList").html('');
var fileArray1 = document.getElementsByClassName('file-input');
for (var i = 0; i < fileArray1.length; i++) {
var files = fileArray1[i].files;
for (var j = 0; j < files.length; j++) {
$("#myList").append("<li style='color:black'>" + files[j].name + "</li>");
}
};
if (($("#myList").html()) != '') {
$('#unselect').css('display', 'block');
$('#divforfile').css('color', 'green');
$('#attach').css('color', 'green');
$('#displayFileNames').html($("#myList").children().length + ' ' + 'files selezionato');
};
if (($("#myList").html()) == '') {
$('#divforfile').css('color', 'black');
$('#attach').css('color', 'black');
$('#displayFileNames').append('Nessun File Selezionato');
};
});
});
function choosefiles(obj) {
$(obj).hide();
$('#myList').css('display', 'none');
$('#hidebtn').css('display', 'none');
$("#seebtn").css('display', 'none');
$('#unselect').css('display', 'none');
$("#upload-form").append("<input class='file-input inputs' type='file' onclick='choosefiles(this)' name='file[]' multiple='multiple' />");
$('#displayFileNames').html('');
}
$(document).ready(function () {
$('#unselect').click(function () {
$('#hidebtn').css('display', 'none');
$("#seebtn").css('display', 'none');
$('#displayFileNames').html('');
$("#myList").html('');
$('#myFileInput').val('');
document.getElementById('upload-form').reset();
$('#unselect').css('display', 'none');
$('#divforfile').css('color', 'black');
$('#attach').css('color', 'black');
});
});
<style>
.divs {
position: absolute;
display: inline-block;
background-color: #fff;
}
.inputs {
position: absolute;
left: 0px;
height: 2%;
width: 15%;
opacity: 0;
background: #00f;
z-index: 100;
}
.icons {
position: absolute;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div>
<form id='upload-form' action='' method='post' enctype='multipart/form-data'>
<div class="divs" id="divforfile" style="color:black">
<input id='myFileInput' class='file-input inputs' type='file' name='file[]' onclick="choosefiles(this)" multiple='multiple' />
<i class="material-icons" id="attach" style="font-size:21px;color:black">attach_file</i><label>Allegati</label>
</div>
</form>
<br />
</div>
<br />
<div>
<button style="border:none; background-color:white; color:black; display:none" id="seebtn"><p>Files ▼</p></button>
<button style="border:none; background-color:white; color:black; display:none" id="hidebtn"><p>Files ▲</p></button>
<button type="button" class="close" aria-label="Close" id="unselect" style="display:none;float:left">
<span style="color:red">×</span>
</button>
<div id="displayFileNames">
</div>
<ul id="myList"></ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(document).ready(function () {
$(document).mousemove(function () {
$('#myList').css('display', 'block');
$("#seebtn").css('display', 'none');
$("#hidebtn").css('display', 'none');
$('#displayFileNames').html('');
$("#myList").html('');
var fileArray1 = document.getElementsByClassName('file-input');
for (var i = 0; i < fileArray1.length; i++) {
var files = fileArray1[i].files;
for (var j = 0; j < files.length; j++) {
$("#myList").append("<li style='color:black'>" + files[j].name + "</li>");
}
};
if (($("#myList").html()) != '') {
$('#unselect').css('display', 'block');
$('#divforfile').css('color', 'green');
$('#attach').css('color', 'green');
$('#displayFileNames').html($("#myList").children().length + ' ' + 'files selezionato');
};
if (($("#myList").html()) == '') {
$('#divforfile').css('color', 'black');
$('#attach').css('color', 'black');
$('#displayFileNames').append('Nessun File Selezionato');
};
});
});
function choosefiles(obj) {
$(obj).hide();
$('#myList').css('display', 'none');
$('#hidebtn').css('display', 'none');
$("#seebtn").css('display', 'none');
$('#unselect').css('display', 'none');
$("#upload-form").append("<input class='file-input inputs' type='file' onclick='choosefiles(this)' name='file[]' multiple='multiple' />");
$('#displayFileNames').html('');
}
$(document).ready(function () {
$('#unselect').click(function () {
$('#hidebtn').css('display', 'none');
$("#seebtn").css('display', 'none');
$('#displayFileNames').html('');
$("#myList").html('');
$('#myFileInput').val('');
document.getElementById('upload-form').reset();
$('#unselect').css('display', 'none');
$('#divforfile').css('color', 'black');
$('#attach').css('color', 'black');
});
});
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.divs {
position: absolute;
display: inline-block;
background-color: #fff;
}
.inputs {
position: absolute;
left: 0px;
height: 2%;
width: 15%;
opacity: 0;
background: #00f;
z-index: 100;
}
.icons {
position: absolute;
}
</style>
<div>
<form id='upload-form' action='' method='post' enctype='multipart/form-data'>
<div class="divs" id="divforfile" style="color:black">
<input id='myFileInput' class='file-input inputs' type='file' name='file[]' onclick="choosefiles(this)" multiple='multiple' />
<i class="material-icons" id="attach" style="font-size:21px;color:black">attach_file</i><label>Allegati</label>
</div>
</form>
<br />
</div>
<br />
<div>
<button style="border:none; background-color:white; color:black; display:none" id="seebtn"><p>Files ▼</p></button>
<button style="border:none; background-color:white; color:black; display:none" id="hidebtn"><p>Files ▲</p></button>
<button type="button" class="close" aria-label="Close" id="unselect" style="display:none;float:left">
<span style="color:red">×</span>
</button>
<div id="displayFileNames">
</div>
<ul id="myList"></ul>
</div>
You can style them, but you can't remove the elements that are already there. If you're creative, you can work with that and do something like this:
input[type=file] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #EEE;
background: linear-gradient(to top, #FFF, #DDD);
border: thin solid rgba(0,0,0, .5);
border-radius: .25em;
box-shadow: inset .25em .25em .25em rgba(255,255,255, .5), inset -.1em -.1em .1em rgba(0,0,0, 0.1);
cursor: text;
padding: .25em;
}
http://jsfiddle.net/zr1x1m2b/1/
I suggest you play around with this code, remove lines, add your own, do whatever until you get something that looks how you like!
Just style a normal button however you want, using your favorite CSS.
Then call a simple JS function to create and link a hidden input element to your styled button. Don't add browser-specific CSS to do the hiding part.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
button {
width : 160px;
height : 30px;
font-size : 13px;
border : none;
text-align : center;
background-color : #444;
color : #6f0;
}
button:active {
background-color : #779;
}
</style>
<button id="upload">Styled upload button!</button>
<script>
function Upload_On_Click(id, handler) {
var hidden_input = null;
document.getElementById(id).onclick = function() {hidden_input.click();}
function setup_hidden_input() {
hidden_input && hidden_input.parentNode.removeChild(hidden_input);
hidden_input = document.createElement("input");
hidden_input.setAttribute("type", "file");
hidden_input.style.visibility = "hidden";
document.querySelector("body").appendChild(hidden_input);
hidden_input.onchange = function() {
handler(hidden_input.files[0]);
setup_hidden_input();
};
}
setup_hidden_input();
}
Upload_On_Click("upload", function(file) {
console.log("GOT FILE: " + file.name);
});
</script>
Notice how the above code re-links it after every time the user chooses a file. This is important because "onchange" is only called if the user changes the filename. But you probably want to get the file every time the user provides it.
For more details, research DropZone and gmail uploads.
Here is one way I recently discovered, with a bit of jQuery
HTML Code:
<form action="">
<input type="file" name="file_upload" style="display:none" id="myFile">
<a onclick="fileUpload()"> Upload a file </a>
</form>
For the javascript/jQuery part :
<script>
function fileUpload() {
$("#myFile").click();
}
</script>
In this example, I have put an "anchor" tag to trigger the file upload. You can replace with anything you want, just remember to put the "onclick" attribute with the proper function.
Hope this helps!
P.S. : Do not forget to include jQuery from CDN or any other source